在jQuery UI中获取ul和li值在拖动时可以对其进行排序然后删除

Question

我有这个代码:

<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>

我需要做的是当我拖放时(例如歌曲描述1从#sortable1某个位置进入#sortable2)给我一个警报(例如,歌曲1来自#sortable1掉落#sortable2)

那可能吗？我应该在"li"中添加ID吗？

非常感谢.

Answer 1

无需添加id到排序项目,jQueryUI的提供的回调函数(见活动上http://jqueryui.com/demos/sortable/),你可以连接发生特定事件时进入.在下面的示例中,我使用接收回调,该回调传递事件和ui对象参数,其中包含构造消息所需的所有内容.

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);
    }
});?

还在jsFIddle上做了一个演示