jquery ui draggable中如何避免div叠加？

Posted 2023-05-08

【中文标题】jquery ui draggable中如何避免div叠加？

【英文标题】：How to avoid the superposition of divs in jquery ui draggable?

【发布时间】：2019-05-21 01:02:36

【问题描述】：

我在容器内动态生成一些 div，这些 div 可以使用最新版本的 jquery-ui 进行拖动。问题是当一个 div 移动到另一个位置时，它不尊重其他 div 的空间，所以它可以在另一个 div 的顶部，我不希望这样。

如果我决定移动一个 div 并将其放在另一个 div 上，会发生这种情况：

这种行为不好，最好是如果我尝试将一个 div 放在另一个上，则不会执行此操作。

这是我的html代码：

<div class="container">
    <div class="row" id="main_row_blog_results"> 
         <!--here the divs are dynamically generated -->
    </div>
</div>

这是我的 JS 代码：

$(document).ready(function()
    $("#btnAddTextsBlog").click(function()
        var texts = "this is a random text";
        var content2 = "<div id='text1' class='draggable' style='float: left; margin-left: 30px; margin-right: 30px; margin-top: 30px; display: block;'><p contenteditable='true' style='font-size: 18px;'>"+texts+"</p></div>";

        $("#main_row_blog_results").append(content2); 

        $(".draggable").draggable(); 

    );         
    $( '.draggable' ).draggable(

    );

我想知道当用户将 div 拖放到其他 div 的空间中时，我该怎么做，将这个 div 移回原来的位置......这个想法是防止 div 之间的碰撞？

【问题讨论】：

与完整的工作示例共享完整的相关代码以重现

你需要使用碰撞检测见***.com/questions/4230029/…

从您的描述中不清楚如果用户将项目拖入该空间会发生什么。应该阻止这样做还是应该将下面的物品移开？请澄清您的问题。

@Twisty 对不起，你是对的。当用户将项目拖放到该空间时，该项目应移回其原始位置...

我确实编辑了我的问题。

【参考方案1】：

我建议如下：

$(function() 
  function makeDrag(obj) 
    obj.draggable(
      handle: ".drag-handle",
      revert: "invalid"
    );
  

  $("#btnAddTextsBlog").click(function() 
    var content = $("<div>", 
      id: "text" + ($(".draggable").length + 1),
      class: "draggable",
    ).css(
      float: "left",
      margin: "30px",
      "margin-bottom": 0,
      disply: "block"
    ).appendTo($("#main_row_blog_results"));

    $("<span>", 
      class: "ui-icon drag-handle 	ui-icon-arrow-4-diag"
    ).css(
      border: "1px solid #000",
      "border-radius": "3px",
      "margin-right": "3px"
    ).appendTo(content);

    $("<p>", 
      contenteditable: true
    ).css(
      "font-size": "18px",
      display: "inline-block"
    ).html("this is a random text").appendTo(content);

    makeDrag(content);
  );

  makeDrag($(".draggable"));
);

.drag-handle:hover 
  background-color: #ccc;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="btnAddTextsBlog">Add</button>
<div class="container">
  <div class="row" id="main_row_blog_results">
    <!--here the divs are dynamically generated -->
  </div>
</div>

所以revert 有几个选项。我在这里使用invalid：

如果设置为"invalid"，则只有当可拖动对象没有被拖放到可放置对象上时才会发生还原。对于"valid"，情况正好相反。

我还添加了一个句柄，因为如果用户去编辑<p> 元素，他们可能会单击它来编辑它，它可能会尝试拖动。因此，为避免任何潜在的混淆，我们使用句柄。

我不再添加 HTML 字符串，而是创建 jQuery 对象，这些对象在创建动态项目时更易于操作。

我还创建了一个可以将 jQuery 对象初始化为可拖动对象的小函数。这有助于始终使用相同的设置进行设置。

希望对您有所帮助。

【讨论】：

太好了，对我帮助很大。谢谢你。