如何避免jQuery UI UI Draggable中的div叠加？

Question

我正在容器内动态生成一些div，并且可以使用最新版本的jquery-ui拖动它们。问题是，当一个div移动到另一个位置时，它不尊重其他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 Object初始化为可拖动对象。这样有助于始终将每个设置设置为相同。

希望有帮助。