开发者

sortable + draggable demo - how to get access to dropped item?

开发者 https://www.devze.com 2023-01-03 16:30 出处:网络
I have a sortable list. When a new 开发者_运维技巧item is dropped into the list (from a draggable), I\'d like to get access to it to perform some operations on it. This is what I have:

I have a sortable list. When a new 开发者_运维技巧item is dropped into the list (from a draggable), I'd like to get access to it to perform some operations on it. This is what I have:

$("#mySortableList").sortable({
    receive: function(event, ui) {
        alert("this is the dropped item: " + ui.item.toString());
    }
}).disableSelection();

so "ui.item" is the element that was dropped, but it's not the duplicated item that will now be part of my list. How do I get access to the new item that was dropped? I am using the exact demo from the jquery-ui site here: http://jqueryui.com/demos/draggable/#sortable

Thanks


You can get the item in the stop event and check that it came from the draggable (it doesn't have a handle attached, which it would if it was from the sortable), like this:

$("#mySortableList").sortable({
    stop: function(event, ui) {
    //check it wasn't here previously
    if(!ui.item.data('tag') && !ui.item.data('handle')) {
        ui.item.data('tag', true); //tag new draggable drops
        alert("this is the dropped item: " + ui.item.toString());
    }
}).disableSelection();

You can see a demo to play/test with here, since a handle doesn't get added, at least not in a way that matters, we're tagging items dropped from the draggable so that they won't fire the alert again when moved inside the sortable.


I am currently removing the received item like this:

$(this).data().sortable.currentItem.remove();  --now to find its INDEX!
0

精彩评论

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