仅针对特定项的Jquery可排序句柄

Question

我想知道我们是否可以为特定项目定义jquery可排序的句柄。

我有可编辑和不可编辑的div，所以我希望可编辑的div只按句柄排序，而不可编辑的div可以在没有句柄的情况下拖动。

Answer 1

如果我理解正确的话，您希望它们都是可排序的，整个div不可编辑，而只有其句柄可编辑。

你有一个类句柄吗?

如果是可编辑的，让它变成一个小的span之类的，如果是不可编辑的，让它变成整个容器的div

<li class="ui-state-default">
    <span class="handle">handle</span>
    <textarea>editable</textarea>
  </li>
<li class="ui-state-default">
    <div class="handle">Item 2</div>
 </li>

:

http://jsfiddle.net/Jr8xU/

Answer 2

jQuery sortable允许您动态声明处理选项，通过使用setter:

// setter
$( ".sortable" ).sortable( "option", "handle", ".handle" );

如果您正在编写鼠标接口，您可以尝试侦听鼠标移过/移出事件。然后在没有句柄的元素上禁用句柄:

$(".sortable").sortable( "option", "handle", false );

并在鼠标退出时返回:

$(".sortable").sortable( "option", "handle", ".handle" );