jquery 可排序事件触发器

Question

我有一个 div 中的项目列表，可以将其移动到另一个 jquery 可排序的列表。这是我的 html:

        <ul id="sortable2" class="droptrue">
        <span>MyPage disponibili</span>
    <?php $i = 0; foreach($clocks as $clock) { ?>
            <li class="percheckbox clock ui-state-default" id="orologio_<?php echo $clock['id']; ?>">
                <?php echo $clock['nome']; ?>
            </li>
    <?php $i += 1; } ?>
        </ul>
        <ul id="sortable4" class="droptrue">
        <span>MyPage selezionati</span>
        </ul>

所以用户可以将项目从#sortable2 移动到#sortable4。当用户将至少一个项目从#sortable2 移动到#sortable4 时，我想将一些 css 应用到 dom 中的另一个 div。我试图寻找我应该查看的事件类型（更改、模糊、ecc），但找不到我的问题的答案。

有什么想法吗？

Answer 1

您可以为此使用接收事件！

来自documentation of the receive event：

This event is triggered when an item from a connected sortable list has been dropped into another list. The latter is the event target.

所以你可以这样做：

$( "#sortable4" ).sortable({
    receive: function( event, ui ) {
        //do something
    }
});

Answer 2

您需要查看 Jquery Ui 可排序 API 和那里的事件 http://api.jqueryui.com/sortable/#event-update

例如，您可以在 sortable4 目标上查找更新事件：

$( "#sortable4" ).sortable({
   update: function( event, ui ) {}
});

jquery 可排序事件触发器

jquery sortable event trigger

javascript

jquery

jquery-ui

您可以为此使用接收事件！