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/

Nunners · Accepted Answer · 2013-11-28 10:47:28Z

7

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)

answered Nov 28, 2013 at 10:47

Nunners

3,04715 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Terry Lin Over a year ago

Your code can't not be dragged and dropped back from div2 to div1

Terry Lin · Accepted Answer · 2015-06-07 18:48:35Z

3

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.

answered Jun 7, 2015 at 18:48

Terry Lin

2,60725 silver badges21 bronze badges

1 Comment

Szymon Zachariasz Over a year ago

i cant find the demo, is there somewhere another example of yours?

Collectives™ on Stack Overflow

jquery ui drag drop + sortable

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related