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

Question

我有一個可拖動的列表對。設計：2 ul列表，可互換項目，拖放。

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

的問題是，我要當一個李項目在下降到觸發事件或觸發某些事件時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

請檢查b elow片段。使用停止並接收兩個事件。停止事件將在每次拖放元素時觸發。只有當元素從一個列表移動到另一個時，接收事件纔會觸發。您connectWith財產後：

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

Answer 2

出乎我的上述評論，而不是使用 '滴' '停止'：

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

https://jsfiddle.net/0yw43n6w/