Question

我有一个列表，其中包含需要排序的不同项目。但还有一个变化：某些元素只允许在列表中的特定位置。

示例（请查看http://jsfiddle.net/pYL32/2/）：有一个包含 foo ， bar 和 baz元素的列表需要可排序;但项目 foo 只允许在顶部或底部。

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

当我开始向下拖动 foo 并跨越 bar 和 baz 之间的空格时，占位符应跳转到 baz 之后的最后一个位置。当我停止拖动时， foo 项应放在列表的底部。
当我开始向上拖动 baz 并且我越过 foo 时，占位符应该停留在 foo 之下。当我停止拖动时， baz 项目应放在 foo 和 bar 之间

我可以通过挂钩到列表中的位置发生变化时触发的可排序的change事件来实现这一点吗？是否可以在回调此事件时恢复位置变化？

或者我的问题有另一个解决方案（我真的很想坚持使用jQuery UI库，所以我不是在寻找使用其他框架/库的解决方案）？

Answer 1

使用窗口小部件的beforeStop事件，检测占位符的位置，并在不需要的位置取消事件

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

此处更新jsfiddle，您无法将foo拖到位置2

我知道这不完全是你问的问题，但我发现它的功能非常接近

Answer 2

维克尔的回答几乎完全解决了我的问题。唯一有点＆＃34;丑陋＆＃34;他的解决方案是在拖动当前位置是否有效期间没有视觉反馈。所以我选择了以下解决方案：

beforeStop: function(event, ui) {
  if(ui.placeholder.index() == 2) return false;
},
change: function(event, ui) {
  if(ui.placeholder.index() == 2) ui.placeholder.addClass('invalid-position');
  else ui.placeholder.removeClass('invalid-position');
}

使用此解决方案，我会在每次更改时检查占位符的位置，并在占位符处于无效位置时向占位符添加类无效位置，如果放在那里则会还原。根据这个无效位置类，我然后设置占位符样式以提供视觉反馈（例如，当处于无效位置时，使用红色边框或背景）。

jQuery UI可排序：是否可以限制单个元素的可能位置？

2 个答案: