开发者

Jquery Sortable, delete current Item by drag out

开发者 https://www.devze.com 2023-01-09 21:38 出处:网络
My Problem: The sortable event out: fires when I drag something in the list or w开发者_开发知识库hen I sort the list.

My Problem: The sortable event out: fires when I drag something in the list or w开发者_开发知识库hen I sort the list. But I only want to start the function when I drag an item out.

My code

        $(document).ready(function ust()
        {    
            $('#div1').sortable({
                out: function(event, ui) { $('#nfo').append('OUT<br />'); }
            });

        });

Working example http://jsfiddle.net/FrbW8/22/


Use beforeStop to intercept the item and remove it:

receive: function(e, ui) { sortableIn = 1; },
over: function(e, ui) { sortableIn = 1; },
out: function(e, ui) { sortableIn = 0; },
beforeStop: function(e, ui) {
   if (sortableIn == 0) { 
      ui.item.remove(); 
   } 
}

(I originally found this in the Google, but can no longer find the link. So, I apologize for not referencing the source.)


This is the default behaviour of the out callback. See this jquery ui trac ticket

I really do not agree with the 'logical' behaviour notion.

"However, note that the "out" callback will still be triggered if you drag into a list and then release the mouse (but not if you're not over the list). This is logical behaviour and happens for normal sortables as well."


The other solutions doesn't seems to work with connected sortable lists so I'm posting my own solution that works perfectly for my case. This makes use of the "droppable" plugin capturing the "drop" event when the elements are dropped outside of the sortable lists.

$('#div1').sortable({
    ....
}).droppable({greedy: true})

$('body').droppable({
    drop: function ( event, ui ) {          
        ui.draggable.remove();
    }
});

Here is a jsfiddle of this approach in action: http://jsfiddle.net/n3pjL/


I use this.element.find('.ui-sortable-helper').length to make difference between "sort out event" and "drop out event". When you are sorting, sorted item has class ui-sortable-helper. After drop there is no other ui-sortable-class until you start sorting again (at least in my script). Hope to help someone.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号