I am using the jQuery UI Draggable/Sortable demo (http://jqueryui.com/demos/draggable/#sortable) for the basis of my project. I need to get a reference to the <li>
that gets cloned into the sortable when the sortable receives it. I tried the sortable's receive event, but that only gives a reference to the original draggable <li>
, and not its clone.
JQuery UI Draggable/Sortable – Get reference to new item
jqueryjquery-uijquery-ui-draggablejquery-ui-sortable
Related Topic
- Javascript – Get selected text from a drop-down list (select box) using jQuery
- Jquery UI sortable: how to leave the original visible until the drop
- Jquery UI sortable: how can I change the appearance of the “placeholder” object
- Jquery – How to get the ID of an element using jQuery
- Jquery-ui sortable | How to get it work on iPad/touchdevices
Best Answer
In the demo you reference, there's actually a bug; after you drag an item down it inserts a cloned
li
with anid
which is a duplicate of its brother's into the DOM, so beware (a bug was filed about this but there's no activity around it).I did a few things to achieve this:
To get around the limitation of the demo that I described above, instead apply a
class
to the draggable items that will be linked to thesortable
:Make items with that class draggable, instead of selecting an element by
id
:Tap into the
stop
event of the sortable, and perform some simple logic about the item that was dropped, leveraging the fact that an item with the classnew-item
could only have been dropped (and isn't simply an existing item in the sortable):Note that you could use the
data-*
attribute instead of adding a helper class.Here's a working example: http://jsfiddle.net/andrewwhitaker/twFCu/
Hope that helps.