JQuery 可排序 - 嵌套句柄答案

【问题标题】：JQuery Sortable - Nested HandleJQuery 可排序 - 嵌套句柄
【发布时间】：2013-07-03 20:25:22
【问题描述】：

我正在使用 jquery sortable 在页面上拖放块。但是我的手柄有问题。

块的html是这样的：

<div class="row insumo-editor-module" style="">
    <div class="span12 module-toolbar">
        <div class="btn-group pull-right">
            <button class="btn btn-inverse btn-remove-module"><i class="icon-remove-circle icon-white"></i></button>
            <button class="btn btn-inverse btn-move-module"><i class="icon-move icon-white"></i></button>
        </div>
    </div>

    <!-- More html here -->        
</div>

使其可排序的 javascript 如下（每个 .insumo-editor-module 都包含在 editor_zone 这是一个 div 中）。

editor_zone.sortable( {
    handle: '.btn-move-module',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
}).disableSelection();

我试过直接在 .insumo-editor-module 中使用链接作为句柄，效果很好。我还完全删除了句柄属性并且它可以工作。但是，尝试使用 .btn-move-module 不起作用。

有没有办法使用嵌套的html作为句柄？

有一个jsfiddle here

提前致谢

【问题讨论】：

你为什么要传递一个 jQuery 对象给句柄？
对不起，我不是故意放在那里的，我最初只是尝试了句柄：'.btn-move-module'，但它不起作用，所以我开始玩弄它。跨度>
还有一件事，你为什么想要一个实际的
是的，我正在使用 btn-group 类来设置每个模块的工具栏样式。该按钮位于工具栏内
我在问题中添加了一个 jsfiddle

标签： jquery jquery-ui jquery-ui-sortable handle

【解决方案1】：

问题解决了。您可以毫无问题地将句柄嵌套在其他元素中。通过将替换为标准锚链接，可排序项目现在可以毫无问题地移动。

感谢 rusln 的帮助

【讨论】：

【解决方案2】：

尝试将嵌套的 html 包装到 <li> 标记内 <ul> 并使 ul 可排序。

还可以查看jquery.ui sortable widget 上的items 选项：

$( ".selector" ).sortable({ items: ".row" });

【讨论】：

嗨，alexey，感谢您的回答。您不需要有一个可排序的列表来工作，而 div 已经在工作了。如果我从对可排序的调用中删除句柄，它工作正常。我的问题只是尝试使用 .btn-move-module 作为句柄