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

Posted 2023-02-24

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

【英文标题】：Jquery ui - sortable: drag by icon 'handle' within sortable element

【发布时间】：2012-01-23 01:23:41

【问题描述】：

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

【参考方案1】：

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

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

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

像这样应用选项：

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

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

【讨论】：

OMG 不敢相信我没有在可排序的文档中看到这一点，但它就在 OPTIONS 部分...

嗯似乎在 IE7 中（IE9 中的怪癖模式），它不起作用:(。句柄不起作用，并且由于它仅限于句柄，因此现在在IE7 :(。适用于 FF、IE9、Chrome...

这是 jquery 1.7 和 jq ui 1.8

如果我没记错的话，我曾经遇到过类似的问题。我已经设法在bug ticket 中应用了一个解决方法演示者，但我认为它现在已在最新的 jquery ui 1.8.16 中修复。也许它不相关，但这些问题很难追踪。

@RohitSengar。 handle 属性接受选择器。我想你可以像选择多个元素那样写 handle: '.handle1, .handle2' 这样的东西。试一试。