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

Question

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

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

Answer 1

如果我理解正确，您希望所有这些都是可排序的，整个 div 不可编辑，仅可编辑其句柄。

你有一个类.handle？

在可编辑上，使其成为一个小跨度或其他东西，在不可编辑上使其成为整个容器 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" );