3

我正在尝试实现一个拖放排序库（html5sortable）：http ://farhadi.ir/projects/html5sortable/ 我的问题是我有嵌套列表。拖动子元素会移动父元素。这是我的清单：

<ul id="list" class="sortable">
    <li draggable="true" data-url="index.php" data-auth="all"><span contenteditable="true">Home</span>
        <ul class="sortable">
            <li draggable="true" data-url="view.php?pg=about" data-auth="all"><span contenteditable="true">About Us</span></li>
            <li draggable="true" data-url="view.php?pg=contact" data-auth="all"><span contenteditable="true">Contact Us</span></li>
            <li draggable="true" data-url="view.php?pg=location" data-auth="all"><span contenteditable="true">Location &amp; Hours</span></li>
            <li draggable="true" data-url="news.php" data-auth="all"><span contenteditable="true">News</span></li>
        </ul>
    </li>
    <li draggable="true" data-url="cart.php" data-auth="all"><span contenteditable="true">Products</span>
        <ul class="sortable">
            <li draggable="true" data-url="catalog.php" data-auth="all"><span contenteditable="true">Download Print Catalog</span></li>
            <li draggable="true" data-url="contact.php?frm=catalog" data-auth="all"><span contenteditable="true">Request Print Catalog</span></li>
        </ul>
    </li>
    <li draggable="true" data-url="javascript:void(0)" data-auth="all"><span contenteditable="true">Services</span>
        <ul class="sortable">
            <li draggable="true" data-url="repair.php" data-auth="all"><span contenteditable="true">Repair</span></li>
        </ul>
    </li>
    <li draggable="true" data-url="cart.php" data-auth="acct"><span contenteditable="true">My Account</span>
        <ul class="sortable">
            <li draggable="true" data-url="ordStat.php" data-auth="ordstat"><span contenteditable="true">Order Status</span></li>
            <li draggable="true" data-url="ordHist.php" data-auth="prvord"><span contenteditable="true">Order History</span></li>
        </ul>
    </li>
</ul>

我相信我需要 stopPropagation，但不确定如何在这种情况下实现，因为该库正在处理基于 .sortable 类的子元素的选择。拖动了正确的元素（特定子元素），但父元素暂时从列表中移除，也是被丢弃的元素。库中的这部分代码似乎可以正常工作：

items.children(options.handle).mousedown(function() {
    isHandle = true; // fires on both the span and the li, does not propagate to parent
}).mouseup(function() {
    isHandle = false;
});

过去就是问题所在。我用 .children() 替换了库中的一个 .find() 实例，但这似乎没有效果。

4

1 回答 1

4

我需要将 stopPropagation 添加到 dragstart 事件中。这允许无限嵌套的列表正常工作。

items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
    e.stopPropagation(); // add this line to jquery.sortable.js
    .....
}

然后，当调用 sortable() 时，列表需要全部“连接”：

$('.sortable').sortable({ connectWith: '.sortable' });
于 2013-11-05T19:55:01.907 回答