CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Archer
Archer

Reputation: 65

jQuery Sortable - Move item dropped outside to connected list

I have two sortable lists connected to each other. To move an item from list1 to list2 I have to drag an item from list1 and drop directly on list2.

What I need is when I drag item from list1 and drop outside of list1 item should go to list2, not return to list1. Is that possible?

$('.sortable1').sortable({
   connectWith: '.sortable2'
});

$('.sortable2').sortable({
   connectWith: '.sortable1'
});

http://jsfiddle.net/0tpb8o5d/1/

Upvotes: 3

Views: 2052

Answers (1)

ggzone
ggzone

Reputation: 3711

Fiddle: http://jsfiddle.net/0tpb8o5d/3/

With the over and out events you can get the state of the dragged item beeing outside or inside of the droppable container:

over: function (event, ui) {
    outside = false;
},
out: function (event, ui) {
    outside = true;
},

A simple condition in the beforeStop event does the rest:

beforeStop: function (event, ui) {
   if (outside) {
       ui.item.prependTo('.sortable2');
   }
}

Upvotes: 5

Related Questions