在可拖放容器和可排序容器之间移动可拖动对象 [英] move draggable between droppable + sortable containers

问题描述

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

I've got a scenario where I have multiple droppable containers, that are also sortable. I need to be able to drag clones from my source draggable, and drop them on any of the droppables. Within each droppable, the items need to be sortable. I also need to be able to drag a draggable from one droppable to another.

这里是一个JSFiddle 我无法正常工作的概念.

Here is a JSFiddle I've started as a proof of concept that I can't quite get working.

我可以看到两个问题:

1. 如果将两个项目拖到第一个(最左侧)droppable容器中，然后将底部的一个拖到顶部(以重新排序)，则会注意到动画来自源draggable放在最上面.我认为这与克隆有关，但是我找不到罪魁祸首.

1. If you drag two items onto the first (left-most) droppable container, and then drag the bottom one up to the top (to re-sort them), you'll notice an animation coming from the source draggable up top. I assume this has something to do with the clone but I wasn't able to find the culprit.

将两个项目放在第一个(最左侧)droppable容器中，如果尝试将其中一个项目拖到中间的droppable上，则会看到它再次从源还原为动画draggable向上.

With the two items on the first (left-most) droppable container, if you try and drag one of the items over to the middle droppable, you see it revert again animate back from the source draggable up top.

我希望我不会使其变得过于复杂，但是在drop函数中，我正在使用dropped类来告诉我该项目之前是否已被删除，以及是否没有被删除.我知道这是第一次删除类，因此创建了克隆并将其附加到droppable.

I hope I'm not making it overly complex but in the drop function I'm using the dropped class to tell me whether the item has been dropped or not before, and if it doesn't have the class I know it's the first time dropping , hence creating the clone and appending it to the droppable.

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

Otherwise, if the draggable has been dropped (i.e. has the class dropped), and changed droppables, I won't re-clone it but append it to the new 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));
}

任何人都可以看到我在做什么吗?

Can anyone see what I'm doing wrong?

推荐答案

缺少的键是sortable的connectWith属性.这使我可以连接不同的droppable，以便在更改droppable时sortable不会还原.

The missing key was sortable's connectWith property. This allowed me to connect the different droppables so that sortable doesn't revert back when changing droppables.

这是 工作小提琴 .希望这可以节省将来的时间！

Here is the working fiddle. Hopefully this saves someone time in the future!

这篇关于在可拖放容器和可排序容器之间移动可拖动对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！