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

debugcn 发表于 Dev

罗兰 F。

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

曲折的

我会建议如下：

$(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这里使用：