jQuery: Dropping items from a draggable list to a sortable list

Published October 4th, 2008

For reasons that I might outline in another post sometime, I recently decided to replace MooTools as the JavaScript library behind our company CMS (which I’m in the process of rewriting from scratch) with jQuery.

It’s been a few weeks now since I made the decision and I’m starting to become more comfortable with jQuery’s quite different approach. I’ve also begun working on some of the more complicated aspects of the new CMS, including adopting jQuery UI to provide the interface widgets. One requirement of the system is to have a dialog where search results can be dragged and dropped onto a sortable list.

At first I looked at using two sortable lists and the built-in ‘connectWith’ option, which enables you to link two or more sortable lists together. But then I realised that I didn’t really want the search results to be a sortable list. In fact, what I wanted was a static list whose items could be dragged and placed in the sortable list.

I tried a few experiments, and when those failed I decided to try looking at the code itself to see if I could hack together a solution without too much extra effort. While browsing the ui.draggables code, I stumbled across the intriguingly-named ‘connectToSortable’ option. I was surprised to find it because there’s (currently) no mention of it in the documentation, and indeed it’s very hard to find any reference to it at all beyond the code itself (the only useful link I could find was this one, but it rather over-complicates the issue).

It’s very simple to use: as with connectWith, just specify which sortable(s) you want to connect to with the connectToSortable property:

$('#myDraggable › li').draggable({helper:'clone',connectToSortable:'#mySortable'});

Full example code here.

The code for the example works just fine, but I found when using it in my own project, for some reason it was necessary to add a $(‘mySortable’).sortable(‘refresh’) call after defining the two lists, or the first drop operation would always fail.

By the way, when fiddling around with JavaScript experiments I find JSBin very useful — you can load up any of several JS libraries (jQuery, MooTools, dojo, prototype, YUI, script.aculo.us) and create both JavaScript and HTML to test in a ‘live’ environment. Very handy.

Get a Trackback link

14 Comments

  1. aeran on November 14, 2008

    Thank you so much for your example!
    I’ve been searching through the web for the best possible way for droppables and sortables to live together, and what do you know; its right there in the code itself.

  2. Scott W. on December 27, 2008

    Thank you for providing this example… this is most helpful :)

  3. loucapo on February 9, 2009

    this example is exactly what i need to do. I changed the selector for the sortable to be a class and it doesn’t seem to work in doing it this way. think i am missing something else?

    here is a snippet of my code:
    $(“ul.droptrue > li”).draggable({
    helper:’clone’,
    connectToSortable:’.dropCatch’,
    opacity: .50,
    });

  4. Jacob on March 12, 2009

    I would be interested to know why you decided to switch from MooTools….

  5. swamy on March 24, 2009

    Thanks a lot stickman, that was neat. But i’m wondering how do you now get the items back from the sortable to the drag-pool again? Suppose the user wants to undo a selection and remove an item from the sort list? Thanks again.

  6. Chris on March 30, 2009

    That refresh call was just what I needed. Great find – thanks for publishing it!

  7. Yann Dìnendal on June 18, 2009

    Thanks! $(‘mySortable’).sortable(‘refresh’); solved my problem!
    I was trying to debug this for a few days… I didn’t see any reason why I couldn’t drop any draggable on my sortable if I didn’t refresh first…
    Is there a bug report on this?

  8. Diego Arbelaez on October 28, 2009

    Great! just what i needed… couldnt figure out why i could not drop a DRAGGABLE item in a SORTABLE container until i moved an item from the SORTABLE first… very weird but working now, thanks!

  9. Michael on November 10, 2009

    Freakin’ brilliant . . . so many other sites out there have 10 times as much code but don’t work as well (or at all).

    Any ideas on how to submit the sortable list items in the order they’ve been arranged to a php/mysql database solution?

  10. vig0 on January 12, 2010

    I was beating my brains out trying to figure this out… thanks for the example!

  11. Ben on March 31, 2010

    Perfect! Just what I was looking for :)

  12. Shahid on October 11, 2010

    Hi, Thanks for this wonderful script. I was searching for this kind of effect.
    Thanks again:)

  13. amita on October 21, 2010

    Hey
    excellent work!!!

    $(‘mySortable’).sortable(‘refresh’);

    it sloved my problem in a sec…
    I was trying to debug this for a few days… I didn’t see any reason why I couldn’t drop any draggable on my sortable if I didn’t refresh first…

  14. J00nz on March 22, 2011

    Look’s like this don’t work in ie, at least not in ie9… Works great in chrome though….

Leave a comment

Comment Policy: First time comments are moderated. Please be patient.

OpenID

Anonymous