juleryで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エロウスニペット。 2つのイベントを停止して受信します。ストップイベントは、要素がドラッグアンドドロップされるたびにトリガされます。受信イベントは、要素があるリストから別のリストに移動されたときにのみトリガされます。

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