Take the 2-minute tour ×

I had this jQueryUI sorting between nested ULs working and I somehow broke something.

Problem: I can drag items in each list but cannot move items from one list to another. I swear this was working yesterday. One change I made: I had ALL the ULs with id="sortable" but changed this to class="sortable" (because id is supposed to be unique). I also changed the selector in the JS from #sortable to .sortable to match. That wouldn't cause this, would it?

reproduced here: http://jsfiddle.net/DY2Ez/2/

/* JS */
      $( document ).ready(function() {
        $( "#accordion" ).accordion({ collapsible: true });
        $( ".sortable" ).sortable({ items: "> li.s" });
        $( ".sortable" ).disableSelection(); 
        $( "li.cntrl" ).sortable({ disabled: true }); //make controls not sort
share|improve this question
If you were using #sortable before, your jQuery selector would only have matched one element. Now you're using .sortable, it's picking up all of them. That's a significant difference worth investigating. –  Adrian Wragg Aug 21 '13 at 12:42
Is this what you're looking for? jsfiddle.net/DY2Ez/3 –  Jason P Aug 21 '13 at 12:46
@JasonP That looks like it meets OP's requirements; worthwhile adding it as an answer surely? –  Adrian Wragg Aug 21 '13 at 13:05
@AdrianWragg His question isn't clear to me, and I don't like posting answers I'm not sure of. –  Jason P Aug 21 '13 at 13:06
Thanks @JasonP That does what i was after. Sorry if I wasn't clear. –  gmdavisUX Aug 21 '13 at 14:09
show 1 more comment

1 Answer

up vote 0 down vote accepted

@JasonP provided an answer in the comment above. The third line of code should be:

$( ".sortable" ).sortable({ items: "> li.s", connectWith:'.sortable' });

Added the connectWith option. I'm not sure why it worked previously without it.

share|improve this answer
add comment

Your Answer


