jQuery UI Sort - two list and prevent sortable inside origin list

Question

I have a simple example of jquery ui. Basicly i have to list of items, each one is sortable. And what i want to accomplish is the following: cancel sorting of the same list. with an example, if I click over an element on position one on list one, then drag it to position 6, and dropped. I want to prevent that, but if i drop the element in list two, that is ok.

i don't know how to specify, in order to fit my requeriments. ConnectWith seems not to be enough:

$("#sortable").sortable({
    connectWith: [$('#sortable2')]
});

$("#sortable2").sortable({
    connectWith: [$('#sortable')]
});

here is the example:

http://jsfiddle.net/sQeZE/3/

Answer 1

This may not be exactly what you are looking for, but you can bind to the receive and stop events (they trigger in that order). receive indicates that a list item was received from another list. When this is triggered, you can temporarily unblock sorting. stop attempts to block sorting at all times:

var blocksort = true;
//Using jQuery 1.6.4, but use `.on` when available
$("#sortable, #sortable2").bind('sortreceive', function () {
    blockSort = false;
}).bind('sortstop', function (e) {
    if (blockSort) {
        e.preventDefault();
    }
    blockSort = true;
});

http://jsfiddle.net/sQeZE/5/

Answer 2

One option would be to limit the containment of your lists to be the other list, like so:

$("#sortable").sortable({
    connectWith: [$('#sortable2')],
    containment: $('#sortable2') });

$("#sortable2").sortable({
    connectWith: [$('#sortable')],
    containment: $('#sortable') });

This makes it so that #sortable's items can only be sorted within #sortable2's list, and vice-versa