jquery ui drag drop + sortable

Question

I am trying to make a drag and drop sortable too. I can drag from div 1 to 2 and from div 2 to div 1, but because I use clone I can't get sortable work.

Any ideas?

$(document).ready(function() {

    $("#qselected").sortable();
    $("#qselected").disableSelection();

    $(".qitem").draggable({
        containment : "#container",
        helper : 'clone',
        revert : 'invalid'
    });

    $("#qselected, #qlist").droppable({
        hoverClass : 'ui-state-highlight',
        drop : function(ev, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();

            $(".qitem").draggable({
                containment : "#container",
                helper : 'clone',
                revert : 'invalid'
            });
        }
    });
});

Live demo: http://jsfiddle.net/6xXPq/4/

Answer 1

For this to work you can't have items in the dropped box draggable again, because you wouldn't know if it was trying to sort, or drag.

Here is working code : Example JSFiddle

$(document).ready(function() {
    $("#qselected").sortable();
    $("#qselected").disableSelection();

    $(".qitem").draggable({
        containment : "#container",
        helper : 'clone',
        revert : 'invalid'
    });

    $("#qselected, #qlist").droppable({
        hoverClass : 'ui-state-highlight',
        accept: ":not(.ui-sortable-helper)",
        drop : function(ev, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();
        }
    });
});

To get this to work correctly you can't allow the drop handler to accept items that are being sorted, to do this we add the accept filter to the droppable handler :

accept: ":not(.ui-sortable-helper)",

This now means that you can drag items from the bottom box to the top and then sort the top box. However you can no longer drag items outside the top box.

You will have to devise a new method to remove them (it can be probably be done using a flag to remove the switch between the Draggable/Sortable functionality of the top box)

Answer 2

I have the same question and I found this article and demo

No need to use draggable and droppable, just use the following code (check out demo):

$('#example-1-4 .sortable-list').sortable({
        connectWith: '#example-1-4 .sortable-list',
        containment: '#containment'
    });

The key point is the option connectWith of sortable() Hope this helps.