如何对可放置的拖放进行可拖动的捕捉,允许交换?

时间:2011-12-28 22:30:27

标签: jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

我不知道怎么问这个,但是我想创建一个界面,左边有三个元素(A,B,C),可以拖到右边的三个元素(1,2, 3)。

我希望左侧项目在删除时捕捉到正确的项目,但是可以与其他两个项目互换。

我可以让A,B和C捕捉到右侧,但似乎无法使它们能够被交换。如果我在drop上设置ui.draggable.position,那么我无法弄清楚如何在右侧重新排列它们。我已经尝试克隆并删除它们无济于事,我最终得到了一些错误。

到目前为止我有这个:http://jsfiddle.net/7xFsr/13/

提前致谢!

1 个答案:

答案 0 :(得分:5)

我知道我有一个具体的问题,但这是我的解决方案。最后想出了如何操作jQuery UI position()功能。

我创建了一个数组,其中包含每个起始节点的ID以及它们的包装器(以恢复位置)。

在下降时,我有一个方法遍历数组,并找出该位置是否有任何东西掉落。如果没有,没问题。如果是这样,返回到数组并查找当前项目被删除并获取其先前的容器。选择已存在的位置并将其位置更改为当前位置,并将当前位置置于当前空位置。

有点令人费解,但我使用相同的jsfiddle进行了解决:http://jsfiddle.net/7xFsr/35/

希望这有助于某人!