javascript - 如何使用 jQuery 添加 ul 元素自定义事件？

Question

我有一对可拖动的列表。设计:2 个ul 列表，可互换项目，可拖放。

我正在使用 jquery 可排序小部件。

问题是，我想在 li 项目掉落时触发一个事件，或者在 ul 列表更改时触发某个事件。

我该怎么做？

HTML:

div class="col-lg-4">
<div class="form-group">
  <ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
  </ul>
</div>
</div>
<div class="col-lg-4">
  <div class="form-group">
    <ul id="sortable2" class="connectedSortable">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
    </ul>
  </div>
</div>

JavaScript:

$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
})

Answer 1

请检查下面的代码片段。使用了停止和接收两个事件。每次拖放元素时都会触发停止事件。只有当元素从一个列表移动到另一个列表时，接收事件才会触发。

$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    stop: function(event, ui) {
      var dropElemTxt = $(ui.item).text();
      alert(dropElemTxt+" moved");
    },
    receive: function(event, ui) { 
      var dropElemTxt = $(ui.item).text();
      alert(dropElemTxt+" Moved from another list");
    },
  }).disableSelection();
})

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="col-lg-4">
  <div class="form-group">
    <ul id="sortable1" class="connectedSortable">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
    </ul>
  </div>
</div>
<div class="col-lg-4">
  <div class="form-group">
    <ul id="sortable2" class="connectedSortable">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
    </ul>
  </div>
</div>