Question

我正在尝试实施一个拖拉机删除排序库（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;
});

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

Answer 1

我需要将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' });

html5sortable嵌套列表特异性

1 个答案: