javascript - 在拖放时获取 jQuery UI Sortable 中的 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上做了一个demo