I have a large list that I am trying to get so its sortable.
I would like the parent items
.cat-title
.cat-title
.cat-title
<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>
$(function() {
$( "#user-stream-list > .feed" ).sortable();
});
Your selector is only trying to sort the all of the li's. Sortable needs to be called on each individual list (specifically the ul tag). This is what determines the boundaries of where things can be dragged. So give each list an id then just make them all sortable. (Look below)
<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();
});
fiddle: http://jsfiddle.net/u46NZ/2/