Question

我有一个场景，我有多个droppable容器，也是sortable。我需要能够从我的来源clone拖动draggable，然后将其放在任何droppables上。在每个droppable中，项目必须为sortable。我还需要能够将draggable从droppable拖到另一个droppable。

Here is a JSFiddle我已经开始作为一个概念证明，我无法完成工作。

我可以看到两个问题：

如果您将两个项目拖到第一个（最左侧）draggable容器上，然后将底部项目拖到顶部（重新排序），您会注意到一个动画来自源droppable的顶部。我认为这与克隆有关，但我无法找到罪魁祸首。
在第一个（最左侧）droppable容器中有两个项目，如果您尝试将其中一个项目拖到中间draggable，您会看到它再次恢复为动画从源drop返回顶部。

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

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

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的{{1}}属性。这样，我就可以连接不同的connectWith，以便在更改droppable时sortable不会还原。

这是working fiddle。希望这能为将来节省一些时间！

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

1 个答案: