Как избежать суперпозиции div в jquery ui перетаскиваемых?

Question

Я динамически генерирую некоторые элементы 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, которыми немного проще манипулировать при создании динамических элементов.

Iтакже создал небольшую функцию, которая может инициализировать объект jQuery как перетаскиваемый объект.Это помогает всегда устанавливать каждый с одинаковыми настройками.

Надеюсь, что помогает.