在 droppable + sortable 容器之间移动可拖动

Question

我有一个场景，我有多个 droppable 容器，它们也是 sortable。我需要能够从我的源draggable 中拖动clones，并将它们放在任何droppables 上。在每个droppable 中，项目需要是sortable。我还需要能够将draggable 从一个droppable 拖到另一个。

Here is a JSFiddle我已经开始作为概念证明，但我还不能完全开始工作。

我可以看到两个问题：

1. 如果您将两个项目拖到第一个（最左侧）droppable 容器上，然后将底部的一个拖到顶部（重新排序），您会注意到一个动画来自来源draggable 顶部。我认为这与克隆有关，但我无法找到罪魁祸首。

2. 将两个项目放在第一个（最左侧）droppable 容器上，如果您尝试将其中一个项目拖到中间 droppable，您会看到它再次从源动画返回draggable 顶部。

我希望我不会让它过于复杂，但在 drop 函数中，我使用 dropped 类来告诉我该项目之前是否已被丢弃，如果它没有我知道这是第一次删除类，因此创建克隆并将其附加到droppable。

否则，如果draggable 已被删除（即具有dropped 类）并更改了droppables，我不会重新克隆它，而是将其附加到新的droppable。

if(ui.draggable.hasClass("dropped") && DifferentSource()){
   // this item was already dropped, just changed sources:
   ui.draggable.appendTo($(this));
} else if(ui.draggable.hasClass("dropped") == false) {
   var clone = ui.draggable.clone();
   count += 1;
   clone.html("item " + count);
   clone.addClass("dropped");
   clone.appendTo($(this));
}

谁能看出我做错了什么？

Answer 1

缺少的键是sortable 的connectWith 属性。这使我能够连接不同的droppables，这样sortable 在更改droppables 时就不会恢复原状。

这里是working fiddle。希望这可以节省将来的时间！