HTML
<div id="dropableArea">Drop area</div>
<hr>
<ul>
<li class="dragModule">Item 1</li>
<li class="dragModule">Item 2</li>
<li class="dragModule">Item 3</li>
</ul>
JQuery的
$(function(){
$('.dragModule').draggable({connectToSortable:'#dropableArea',helper: 'clone'});
$('#dropableArea').droppable({
accept: '.dragModule',
activeClass:'active-droppable',
drop:function(){
console.log('drop');
}
});
$('#dropableArea').sortable({accept: '.dragModule',connectWith: '#dropableArea',revert: true,});
$("#dropableArea").disableSelection();
});
我的问题是我控制台console.log('drop');这是可放置的回调放置功能,它被调用两次。
这是jQuery UI的一个已知问题。在同一元素上使用droppable和sortable时会出现此问题。在这里你使用droppable和sortable相同的元素droppableArea
为了解决这个问题,而不是drop
的droppable
方法使用recieve
的sortable
方法。在你的情况下,两者都做同样的事情。
检查FIDDLE
$(function() {
$('.dragModule').draggable({
connectToSortable: '#dropableArea',
helper: 'clone'
});
$('#dropableArea').droppable({
accept: '.dragModule',
activeClass: 'active-droppable'
});
$('#dropableArea').sortable({
accept: '.dragModule',
connectWith: '#dropableArea',
revert: true,
receive: function (event, ui) {
console.log("drop");
}
});
$("#dropableArea").disableSelection();
});
如上所述更改代码,它将解决问题。如果问题得到解决,请告诉我
#UPDATE
您可以在可排序函数中添加以下代码
beforeStop : function (event, ui) {
ui.helper.html('hello');
}