更改jquery sortable的排序行为

时间:2011-11-07 23:20:35

标签: javascript jquery jquery-ui jquery-ui-sortable

我有一个像本页第二个例子那样的可排序:

http://jqueryui.com/demos/sortable/items.html

可分类是目标的组合:

  • 可以拾取和重新排列的那些
  • 禁用的物品,无法拾取(但是是放置目标)。

问题在于组件解释我的排序意图。例如,拾取以下列表的第一个元素并将其拖动到第四个位置将如下所示:

A B C X X ==> B C X A X

这里X表示禁用的物品。

在我的应用程序中,我希望排序行为不同。当目标被拾取并放置在禁用的项目(X)上时,列表不应该移动以容纳目标,而是目标和禁用的项目应该交换位置。

使用与之前相同的示例(从第1位拖到第4位):

A B C X X ==> X B C A X

如果放下目标是正常的(即未禁用),则行为应与之前相同(从第1拖到第3):

A B C X X ==> B C A X X

将其想象为想要在日历上重新安排约会,当您从日期中选择一个并将其放在空白日期时,您不希望其他约会在一天之内随机播放。

2 个答案:

答案 0 :(得分:5)

这不完全是你问题的答案,但我认为你不应该在不适合的情况下强制使用现成的解决方案。

我认为你应该创建自己的控件以保留元素并使用jquery-ui的draggable来实现行为。您的用例与某些基本行为逻辑中的示例不同。

如果您有更多要求,这对未来也是有益的。

答案 1 :(得分:2)

我已经把一个jsfiddle与你想要的功能组合在一起。

基本上我绑定了sortable的change函数,并检查是否禁用了刚刚传递的helper元素。如果是,那么我将该元素移动到助手的起始位置。

这是jsfiddle http://jsfiddle.net/YjhzR/3/

希望这有帮助!

<强>更新

http://jsfiddle.net/YjhzR/6/