Jquery ui - 可排序：在可排序元素中按图标“句柄”拖动

Question

我的 jquery ui sortables 工作正常，但我的可排序元素中有其他交互元素。为了防止在与可排序 div 中的元素交互时意外排序，我想以某种方式使可排序的拖动运动仅在拖动可排序中的某个元素时发生，例如可能驻留的“移动”图标在每个可排序的左上角。通用 jqui 可以做到这一点，还是我需要编写自己的钩子？

Answer 1

插件的选项 handle 允许您定义可以启动排序的元素。您可以提供选择器或元素。

如果你有这个 html，用 .handler 作为开始排序的句柄：

<ul class="sortable">
    <li>
        <span class="handle"></span>
        My element
    </li>
</ul>

像这样应用选项：

$( ".sortable" ).sortable({ handle: '.handle' });

您可以随意设置手柄元素的样式。