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

Posted 2023-05-08

【中文标题】如何使用 jquery ui 对父子 div 进行 droppable？

【英文标题】：How to make droppable to the parent and child div using jquery ui?

【发布时间】：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);
      ,
    );
  );

【参考方案1】：

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

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

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

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

你去... !!!