Question

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

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

问题是，当 ul 项目在 ul 列表发生更改时， li 项目会在某个事件中消失或触发某个事件时，我想触发事件。

我该怎么做？

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

与我上面的评论相反，使用'stop'而不是'drop'：

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

https://jsfiddle.net/0yw43n6w/

Answer 2

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

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

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

2 个答案: