Question

我有一个很大的列表，我试图让它可以排序。

我希望父项.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();
});

Answer 1

你的选择器只是试图对所有的li进行排序。需要在每个单独的列表（特别是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/

Answer 2

除了将可排序函数从<li>移动到<ul>之外，我还必须将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>标签只会移动顶级列表项，即使点击了一个孩子。

jQuery可排序和嵌套列表

2 个答案: