Question

Possible Duplicate:
Drag and Drop between Multiple Lists and Sortable

I want to have two boxes containing their respective elements. I’d like these elements to be sortable AND draggable into the other container (where they will be able to be sorted with they’re new mates)

I have this code:
http://jsfiddle.net/Q63nc/

but it seems that the “sortable” property is not taken and, in addition, once I move a blue box I can’t drag it anymore. Why this?

Thank you for your patience in advance!

Answer 1

The problem you were having with sortable is that you were specifying the wrong classes. You need to select the lists, not the items in the lists.

To get the functionality you want, check out the sortable connectWith property.

The description of the connectWith option:

Takes a jQuery selector with items that also have sortables applied. If used, the sortable is now connected to the other one-way, so you can drag from this sortable to the other.

Here is a new fiddle that shows it working – http://jsfiddle.net/huWYN/.

 $(function(){
     $("#left-side, #right-side")
         .sortable({
             axis: "x",
             connectWith: ".droppable"
         })
         .disableSelection();
});

I added disableSelection so you don’t accidentally hilight things in the list while you’re moving them around. It just makes the experience smoother. You might want to do this for the whole container both lists are in.

disableSelection isn’t documented yet, but it is part of the jQuery UI Core as of 1.7.

From this thread post on the function:

It’s useful for making text elements, or elements that contain
text, not text-selectable. For example, if you have a draggable element, you
may not want text selection to occur when the user goes to drag the element.