jQuery UI 可排序 : is it possible to restrict possible positions of individual elements?

Question

我有一个包含需要排序的不同项目的列表。但还有一个额外的问题:某些元素只允许出现在列表中的特定位置。

示例(请查看 http://jsfiddle.net/pYL32/2/ ):有一个包含元素 foo、bar 和 baz 需要可排序；但项目 foo 只允许出现在顶部或底部。

所以我正在寻找以下行为:

1. 当我开始向下拖动 foo 并穿过 bar 和 baz 之间的空间时，占位符应跳转到baz 之后的最后一个位置。当我停止拖动时，foo 项应放置在列表的底部。

2. 当我开始向上拖动 baz 并穿过 foo 时，占位符应位于 foo 下方。当我停止拖动时，baz 项应放置在 foo 和 bar

之间

我可以通过 Hook 可排序的 change 事件(每当列表中的位置发生变化时就会触发该事件)来实现此目的吗？是否可以在该事件的回调中恢复位置更改？

或者还有其他解决方案可以解决我的问题(我真的很想只使用 jQuery UI 库，所以我不会寻找使用其他框架/库的解决方案)？

Answer 1

使用小部件的 beforeStop 事件，检测占位符的位置，如果位置不理想则取消该事件

beforeStop: function( event, ui ) {
    if(ui.placeholder.index()==2)  return false;
}

这里更新了jsfiddle ，你不能再将 foo 拖到位置 2

我知道这并不完全是您所要求的，但我发现它在功能方面非常接近