Question

我正在使用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中使用链接作为句柄，它运行正常。我还完全删除了handle属性，它可以工作。但是，尝试使用.btn-move-module无效。

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

有一个jsfiddle here

提前致谢

Answer 1

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

另请参阅jquery.ui sortable widget上的items选项：

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

Answer 2

问题解决了。您可以将句柄嵌套在其他元素中而不会出现问题。通过使用标准锚链替换，可排序项目现在正在移动而没有任何问题。

感谢rusln的帮助

JQuery Sortable - 嵌套句柄

2 个答案: