jQuery可排序和嵌套列表

我有一个大名单，我正试图得到它的排序

我希望父项

.cat title

可以在彼此之间进行排序，这将移动子项。但是，我希望

.cat title

的子项可以在每个

.cat title

之间进行排序

它类似于类别和子项，但jQuerySortable并没有达到我预期的效果

HTML

<ul id="user-stream-list" class="user-stream-list">
    <li class="feed ui-sortable"><span class="cat-title" data-title="5">Apple</span>
        <ul>
            <li class="feed sub"><a data-uid="15" data-fid="11" href="http://appleinsider.com/appleinsider.rss"><img src="https://www.google.com/s2/favicons?domain=appleinsider.com" class="favicon"><span class="title">AppleInsider</span><span class="options"><span data-fid="11" class="addcat">+</span><span class="delete">×</span></span></a></li>
            <li class="feed sub"><a data-uid="15" data-fid="29" href="http://9to5mac.com/feed/"><img src="https://www.google.com/s2/favicons?domain=9to5mac.com" class="favicon"><span class="title">9to5Mac</span><span class="options"><span data-fid="29" class="addcat">+</span><span class="delete">×</span></span></a></li>
        </ul>
    </li>
    <li class="feed ui-sortable"><span class="cat-title" data-title="15">Gadgets</span>
        <ul>
            <li class="feed sub"><a data-uid="15" data-fid="2" href="http://www.engadget.com/rss.xml"><img src="https://www.google.com/s2/favicons?domain=www.engadget.com" class="favicon"><span class="title">Engadget</span><span class="options"><span data-fid="2" class="addcat">+</span><span class="delete">×</span></span></a></li>
            <li class="feed sub"><a data-uid="15" data-fid="59" href="http://feeds.gawker.com/gizmodo/vip"><img src="https://www.google.com/s2/favicons?domain=feeds.gawker.com" class="favicon"><span class="title">Gizmodo</span><span class="options"><span data-fid="59" class="addcat">+</span><span class="delete">×</span></span></a></li>
        </ul>
    </li>
    <li class="feed ui-sortable"><span class="cat-title" data-title="9">Tech Crunch</span>
        <ul>
            <li class="feed sub"><a data-uid="15" data-fid="60" href="http://feeds.feedburner.com/TechCrunch/gaming"><img src="https://www.google.com/s2/favicons?domain=feeds.feedburner.com" class="favicon"><span class="title">TechCrunch » Gaming</span><span class="options"><span data-fid="60" class="addcat">+</span><span class="delete">×</span></span></a></li>
            <li class="feed sub"><a data-uid="15" data-fid="61" href="http://feeds.feedburner.com/crunchgear"><img src="https://www.google.com/s2/favicons?domain=feeds.feedburner.com" class="favicon"><span class="title">TechCrunch » Gadgets</span><span class="options"><span data-fid="61" class="addcat">+</span><span class="delete">×</span></span></a></li>
            <li class="feed sub"><a data-uid="15" data-fid="62" href="http://feeds.feedburner.com/Mobilecrunch"><img src="https://www.google.com/s2/favicons?domain=feeds.feedburner.com" class="favicon"><span class="title">TechCrunch » Mobile</span><span class="options"><span data-fid="62" class="addcat">+</span><span class="delete">×</span></span></a></li>
            <li class="feed sub"><a data-uid="15" data-fid="43" href="http://feeds.feedburner.com/Techcrunch"><img src="https://www.google.com/s2/favicons?domain=feeds.feedburner.com" class="favicon"><span class="title">TechCrunch</span><span class="options"><span data-fid="43" class="addcat">+</span><span class="delete">×</span></span></a></li>
        </ul>
    </li>
    <li class="feed ui-sortable"><span class="cat-title" data-title="9">Uncategorized</span>
        <ul>
            <li class="feed"><a data-uid="15" data-fid="8" href="http://feeds.gawker.com/lifehacker/full"><img src="https://www.google.com/s2/favicons?domain=lifehacker.com" class="favicon"><span class="title">Lifehacker</span><span class="options"><span data-fid="8" class="addcat">+</span><span class="delete">×</span></span></a></li>
            <li class="feed"><a data-uid="15" data-fid="13" href="http://www.theverge.com/rss/index.xml"><img src="https://www.google.com/s2/favicons?domain=www.theverge.com" class="favicon"><span class="title">The Verge</span><span class="options"><span data-fid="13" class="addcat">+</span><span class="delete">×</span></span></a></li>
        </ul>
    </li>
</ul>

---

您的选择器仅尝试对所有li进行排序。需要在每个单独的列表（特别是ul标签）上调用Sortable。这就决定了事物可以被拖动的边界。 所以给每个列表一个id，然后让它们都可以排序。（看下面）

---

fiddle:

除了将可排序函数从

移动到

之外，我还必须将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' });

根据我的经验，仅仅移动到

标签，即使单击了一个子项，也只会移动顶级列表项

$(function() {
    $( "#user-stream-list" ).sortable();
});
$(function() {
    $( "#appleSub" ).sortable();
});
$(function() {
    $( "#techSub" ).sortable();
});
$(function() {
    $( "#gadgetSub" ).sortable();
});
$(function() {
    $( "#uncatSub" ).sortable();
});

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

$('.sortable').sortable({ connectWith: '.sortable' });