Question

I have this code:

<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Song Description 1</li>
<li class="ui-state-default">Song Description 2</li>
</ul>

<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Song Description 3</li>
<li class="ui-state-default">Song Description 4</li>
</ul>

What i need to do is when i drag and drop (ex. Song Description 1 from #sortable1 to some position in #sortable2) to give me an alert (ex. Song 1 from #sortable1 was dropped in #sortable2)

Is that possible? Should i add ID’s to the “li”‘s?

Help much appreciated.

Answer 1

No need to add id to the sortable items, jQueryUI provides callback functions (see Events on http://jqueryui.com/demos/sortable/) you can hook into when certain events occur. In the example below I am using the receive callback which is passed the event and ui object parameters which contain everything you need to construct the message.

JavaScript

​$('#sortable1, #sortable2').sortable({
    connectWith: '.connectedSortable',
    receive: function(event, ui) {
        console.log(ui.item.html() + ' from #' + ui.sender.context.id + ' was dropped in #' + this.id);
    }
});​

Also made a demo on jsFIddle