在jQuery UI中获取ul和li值，拖放即可排序

Get ul and li values in jQuery UI Sortable on drag then drop

本文关键字：拖放 排序 li UI jQuery 获取 ul      更新时间：2023-09-26

我有这个代码：

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

我需要做的是当我拖放（例如，#sortable1中的歌曲描述1到#sortable2中的某个位置）时给我一个警告（例如，来自#sortable1的歌曲1被拖放到#sortable2中）

这可能吗？我应该在"李"的ID上加ID吗？

非常感谢您的帮助。

无需将id添加到可排序项中，jQueryUI提供回调功能（请参阅上的Eventshttp://jqueryui.com/demos/sortable/)当某些事件发生时，您可以挂断。在下面的示例中，我使用receive回调，该回调传递给事件和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

上进行了演示
相关文章：