JQuery - manage a dropped item in a sorted list

Question

I have a draggable list (.field) where you can drag items from it to a sortable list (.sortlist). I did it this way because I did not want the main list (.field) to somehow change. It works fine, but I cannot figure out how to manipulate a discarded field in a sorted list.

I can make this from being dragged to the area resettable by using the following in the function for "drop:" in droppable ():

$(this).append('html code here to change content of dragged field'); 

However, this does not work inside sortable (). My code is as follows:

 $(".sortlist").sortable({ receive: function(event, ui) { var dropElemTxt = $(ui.item).text(); var dropElemId = $(ui.item).attr('id'); $(ui.item).replaceWith('<li class="box" id="'+dropElemId+'">Updated field! '+dropElemTxt+'</li>'); } }); 

$ (ui.item) .replaceWith changes the main field that is being dragged, so this does not work. And I tried $ (this) .replaceWith, but this updates the sorted area (.sortlist).

Any idea what code I need to reference the item being dragged?

Thanks a lot, Ali.

Answer 1

You can get the item being dragged in beforeStop event:

 beforeStop: function (event, ui) { draggedItem = ui.item;}, receive: function (event, ui) { /* use draggedItem here*/ } 

Using the beforeStop event instead of receiving was enough for me:

 beforeStop: function(event, ui) { var myClassItem = $('.myClass', ui.item); myClassItem.bind('click', function(){ /*my function*/ }); } 

Answer 2

I think I worked it out. A bit hacked, but it seems to work!

I need to use $ ('. Sortlist li: last') to access the item being dragged ...

Answer 3

I followed your thought, but there were a few errors with this approach (sometimes the element that was reset just disappeared when using droppable + sortable). Here is something that worked for me:

 $(".draglist").draggable({ start: function(e, ui) { draggedItem = ui.item; } }); $(".sortlist").sortable({ receive: function(event, ui) { //do something with the 'draggedItem' here... var droppedElemTxt = draggedItem.text(); var droppedElemId = draggedItem.attr('id'); } , start: function(e, ui) { draggedItem = ui.item; } }); 

Answer 4

The inability to access the discarded item is a known bug in jQuery ui sorts. The ticket contains a patch that allows you to access drop, and is expected to be fixed in a future release.

Answer 5

I think I really came up with a better solution ... it seems to work so far ...

I attached droppable to the sortable to declare the global var of the item being dragged. A bit like this:

 $(".sortlist").droppable({ drop: function(e, ui) { draggedItem = ui.draggable; } }).sortable({ receive: function(event, ui) { //do something with the 'draggedItem' here... var droppedElemTxt = draggedItem.text(); var droppedElemId = draggedItem.attr('id'); } });