如何使用 jquery ui 对父子 div 进行 droppable？答案

【问题标题】：How to make droppable to the parent and child div using jquery ui?如何使用 jquery ui 对父子 div 进行 droppable？
【发布时间】：2021-10-15 04:07:24
【问题描述】：

我想拖动一个元素并将其放在一个使用 jquery ui 放置的子元素上。

这里 Div-1 ，Div-2 和 Column 是可拖动的元素。它们可以放在 div 中（Drop here）。我将 Column 放在 div 中（Drop here）。然后我想将另一个 div 放在列。但他们不能放在那里。

这里是 HTML 代码..

<div id="draggable1" class="div">
  <p>Div-1</p>
</div>
<div id="draggable2" class="div">
  <p>Div-2</p>
</div>
<div id="column" class="div">Column</div>

<div id="droppable">
  <p>Drop here</p>
</div>

还有 jquery 部分...

$(function () {
    $("#draggable1").draggable({
      helper: "clone",
    });
    $("#draggable2").draggable({
      helper: "clone",
    });
    $("#column").draggable({
      helper: "clone",
    });
    $("#column").droppable({
      drop: function (event, ui) {
        $("#droppable").droppable("disable");
        var columnItem = $(ui.draggable).clone();
        console.log(columnItem);
        $(this).append(columnItem);
      },
    });
    $("#droppable").droppable({
      drop: function (event, ui) {
        var droppedItem = $(ui.draggable).clone();
        console.log(droppedItem);
        $(this).append(droppedItem);
      },
    });
  });

【问题讨论】：

标签： jquery jquery-ui drag-and-drop jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

我想更好的方法是使用 droppable 的贪婪选项。如果您发现任何问题，请不要忘记通过 API。

http://api.jqueryui.com/droppable/#option-greedy

下面是你的代码在贪婪选项下的样子：

$(".child").droppable({ 
    accept: '.item',
    greedy: true,
    drop: function(e, ui){ 
     alert("drop on child");
    }
});

你去... !!!

【讨论】：