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

我有一个可拖动的列表对。设计：2 ul列表，可互换项目，拖放。如何使用jQuery添加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(); 
})

来源

2016-08-30 White Knight

添加 '（）{}功能下降'。 – rsn

'drop'是'droppable'，'stop'是'可排序'，我的不好。 – rsn

如果你不知道，请不要评论。 @rsn –

请检查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>

来源

2016-08-30 17:01:17

这是正确的答案，谢谢@Rahul Patel –

这很棒.. :) –

与“停止”事件它足以解决我的问题（Y） –

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

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

https://jsfiddle.net/0yw43n6w/

来源

2016-08-30 16:57:17 rsn

这解决了我的问题！谢谢 –

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

回答

相关问题