Question

以下是我的页面的标记。

<html>
<head>
<script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    });
  });
</script>
</head>
<body>
<div id="sortable1" class="connectedSortable">
    <div class="tile-view-content">
        Item 1
    </div>
    <div class="tile-view-content">
        Item 2
    </div>
    <div class="tile-view-content">
        Item 3
    </div>
    <div class="tile-view-content">
        Item 4 
    </div>
    <div class="tile-view-content">
        Item 5
    </div>
</div>
<div id="sortable2" class="connectedSortable">
    <div class="tile-view-content">
        Item 1
    </div>
    <div class="tile-view-content">
        Item 2
    </div>
    <div class="tile-view-content">
        Item 3
    </div>
    <div class="tile-view-content">
        Item 4 
    </div>
    <div class="tile-view-content">
        Item 5
    </div>
</div>
</body>
</html>

我正在开发的应用程序要求我将一个项目从#sortable1移动到#sortable2，反之亦然。

直到现在我成功地做了这么多。我接下来要做的是当#sortable1中的项目移动到#sortable2时调用函数。是否有一个在Sortable小部件内部触发的事件，我可以听到并触发我的函数调用？

Answer 1

当项目移动到另一个列表时，jQuery sortable会触发receive事件。

来自文档

接收（event，ui）

当连接的可排序列表中的项目已被放入另一个列表时，将触发此事件。后者是事件目标。**

您可以在receive事件处理程序中调用您的函数，如下所示：

$(function() {
  $( "#sortable1, #sortable2" ).sortable({
    connectWith: ".connectedSortable",
    receive: function(e, ui){
                if(ui.sender.attr('id')=='sortable1'){
                    yourFunction(); // call your function here.
                }
             }
  });
});

如何在将项目移动到另一个已连接的可排序项时执行功能

1 个答案: