Search jQuery

jQuery Forum

Developing jQuery UI

john.lynn..

Sortable receive: how do I get new item?

Working on it

Need more info
Working on it
Answered

in Developing jQuery UI • 10 years ago

Hey everyone,

Heres the situation: I have a draggable that I am plopping into a sortable list (its clone, anyway). I need to copy some (but not all) of its data() into the new item in the sortable. However, for some strange reason, ui.sender and ui.item both point to the same, original object. Which doesn't seem to make much sense, especially since the in the beforeStop stop event, which is fired BEFORE the receive event, ui.item points to our newly created item in the sortable.

There are of course ways around this, but they all feel horribly inelegant and hacky.

How do I access the new item while in the receive event?

Replies(4)

nickspacek

Re: Sortable receive: how do I get new item?

10 years ago

This seems like a big hole in the featureset. :)

I think there should be a way to cancel the receive event as well, and modify how the Sortable adds a new item. I think it just clones the Draggable element. It would be nice to be able to add a custom element instead, or at least have some sort of hook into the creation of the new element.

nickspacek

Re: Sortable receive: how do I get new item?

10 years ago

I looked a little at the Sortable code, but without knowing all the background it's hard to tell what changes could easily be made. The "ui" parameter for the "receive" event is generated using the source list explicitly, so by the looks of it this is the intended behavior.

It might be helpful to have both exposed:

ui = {

...

sourceItem: inst ? inst.currentItem : null,

item: this.currentItem

}

I guess that's potentially a breaking change though, so maybe keep "item" the same and have a "newItem" property.

john.lynn..

Re: Sortable receive: how do I get new item?

10 years ago

Yeah, I came to the same conclusion. I didn't want to go mucking around in the jQuery source changing core functionality, so I managed a work around by copying the data into an interim object, setting flags in the container to know when an item has been received and when to copy data, etc. Total hack, in other words. ;P

It is absolutely inexplicable to me that at no time is the old item (ui.sender in this case) visible to the new ui.item; Especially in the event in which it is likely you'll need to be able to do exactly that. Furthermore, I'm puzzled as to why, in that very event, ui.sender and ui.item references to the same object...

Oh well. Despite this little hiccup, I've really enjoyed using jQuery for this project.

nickspacek

Re: Sortable receive: how do I get new item?

10 years ago

I know I'd like to see a good solution offered in the next release if possible! :) I actually hacked the code since it seemed like a small change, even though I'd have to manually change when upgrading.

tronos

Re: Sortable receive: how do I get new item?

10 years ago

its so simply ;]

$('#gallery').sortable({
receive: function(event, ui) { imageDropped(); }
});
function imageDropped() {
var item = $('#gallery li:not(.added)');
// do something with "item" - its your new pretty cloned dropped item ;]
item.addClass( 'added' );
}

royalsflu..

Re: Re: Sortable receive: how do I get new item?

10 years ago

I tried your method, it works partially – when I change the HTML in the draggable object, I cannot drag more of it.

jintrone

Re: Sortable receive: how do I get new item?

9 years ago

Here's one inelegant and hacky way...

$(".sortable").sortable({
                receive:
                    function(event,ui) {
                       var newItem = $(this).data().sortable.currentItem;
                       //do what you will with the newItem
                    }


                });

wngchng87

Re: Re: Sortable receive: how do I get new item?

9 years ago

I little cleaner, uses a class for elements already on the ul and $.data() to identify duplicates

  receive: function(event, ui) {
  alert("begin receive - ul#" + $(this).attr("id"));
  //remove any previous duplicate items
  $(this).parent().children("ul").children("li.old[data-dbid=\"" + ui.item.data("dbid") + "\"]").remove();

  //replace the new item
  $(this).children().not(".old").replaceWith("<li data-dbid=\"" + ui.item.data("dbid") + "\" class=\"old\">ID " + ui.item.data("dbid") + "</li>");}

Full demo: http://jsfiddle.net/wngchng87/evy5a/

Top Reply

Response title

Attachments

jQuery Forum

Sortable receive: how do I get new item?

Working on it

Replies(4)

Re: Sortable receive: how do I get new item?

Re: Sortable receive: how do I get new item?

Re: Sortable receive: how do I get new item?

Re: Sortable receive: how do I get new item?

Re: Sortable receive: how do I get new item?

Re: Re: Sortable receive: how do I get new item?

Re: Sortable receive: how do I get new item?

Re: Re: Sortable receive: how do I get new item?

Statistics

Tags

Actions