jQuery 可排序和嵌套列表答案

【问题标题】：jQuery sortable and nested listsjQuery 可排序和嵌套列表
【发布时间】：2013-10-01 15:54:58
【问题描述】：

我有一个很大的列表，我正在尝试获取它以便对其进行排序。

我希望父项.cat-title 可以在彼此之间进行排序，这将使子项与它们一起移动。但是我希望.cat-title 的孩子可以在每个.cat-title 之间进行排序。

类似于类别和子项，但 jQuery 可排序并没有按照我的预期进行

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>

jQuery

$(function() {
    $( "#user-stream-list > .feed" ).sortable();
});

【问题讨论】：

标签： jquery jquery-ui-sortable

【解决方案1】：

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

<ul id="user-stream-list" class="user-stream-list">
<li class="feed ui-sortable "><span class="cat-title" data-title="5">Apple</span>
    <ul id="appleSub">
        <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 id="gadgetSub">
        <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 id="techSub">
        <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 id="uncatSub">
        <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>

jQuery

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

小提琴： http://jsfiddle.net/u46NZ/2/

【讨论】：

【解决方案2】：

除了将 sortable 函数从 <ul> 移动到 <li> 之外，我还必须将 stopPropagation 添加到 sortable 中的 dragstart 事件。这允许无限嵌套的列表正常工作。

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

那么当调用 sortable() 时，列表需要全部“连接”起来：

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

根据我的经验，仅移动到 <ul> 标记只会移动顶级列表项，即使单击了孩子也是如此。

【讨论】：