将可拖动对象相互拖动答案

【问题标题】：Drag draggables into each other将可拖动对象相互拖动
【发布时间】：2016-08-18 19:14:56
【问题描述】：

我的问题是，是否有办法将 jQuery 拖入彼此？我知道这很模糊，所以我会告诉你我的意思。

我复制了this（所以我可以编辑它）并对其应用了一些样式。

这是fiddle。

您可以看到您可以将“拖动”元素拖到第一个框中。现在我需要一个解决方案，如果您将一个元素拖到另一个元素之上，则该项目应放入另一个元素中。我希望你能帮助我，我以前从来没有这样做过。（我并不一定要使用 jQuery UI）。

$(".container").droppable({
  // accept draggables only from #toolbox,
  // this will prevent cloning of the draggables(inside drop event handler),
  //  that already have been dropped inside #container
  accept: "#contain .drag",
  drop: function (event, ui) {
    // when a draggable is dropped: 
    // 1: clone it's helper 
    // 2: Make the helper draggable
    // 3: set containment to #container
    $(this).append($(ui.helper).clone().draggable({
      containment: "parent"
    }));
  }
});
$("#contain .drag").draggable({
  revert: "invalid",
  helper: "clone"
});

编辑：添加了一个新的小提琴，具有更好的标记。 P.S.：感谢您的编辑@Scott

【问题讨论】：

“#Some code because of jsfiddle link”是怎么回事？
不确定我是否理解。两个你的小提琴链接似乎允许可拖动的“堆叠”在另一个之上。
我希望它们像第二个示例的第二个框一样堆叠起来，而不是相互重叠。
因此，如果您将“拖动”拖放到第一个框（第二个链接）中，您希望它们对齐网格吗？嗯，一个向下然后向右流动的网格，所以“堆叠”？
我编辑了您的问题，以澄清 Chrisstar。如果您觉得我的编辑不正确或没有根据，请更正。谢谢！

标签： javascript jquery html jquery-ui draggable

【解决方案1】：

我查看了元素被删除后的状态，然后使用 jQuery 使它们与第二个框中元素的状态相匹配。

首先，我添加了 style 类，然后删除了 draggable 类。但由于 jQuery 也使用绝对定位，所以我也必须将其从元素中移除。

注意：元素是display: block，所以它们不会从左到右堆叠。

https://jsfiddle.net/p1fwf4L7/3/

【讨论】：

这是一个基础，但遗憾的是不是我需要的。我希望这些可拖动对象仍然能够移动并使其他可拖动对象仅在您将它们放在其他可拖动对象下方时才对齐。