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的歌曲1）已放入#sortable1）

这可能吗？我应该将ID添加到“li”的吗？

非常感谢。

Answer 1

无需向可排序项添加id，jQueryUI提供了可在某些事件发生时挂钩的回调函数（请参阅{{3>}上的事件）。在下面的示例中，我使用 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);
    }
});

还制作了http://jqueryui.com/demos/sortable/

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

1 个答案:

的JavaScript