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

Question

我在容器内动态生成一些 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 之间的碰撞？

Answer 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 对象初始化为可拖动对象的小函数。这有助于始终使用相同的设置进行设置。

希望对您有所帮助。