jQuery UI dropable事件的droppable fires on sortable

我有一个可以放入(现有)可排序列表中的元素列表.
当droppable元素被放入sortables时,我想修改该元素.我通过调用droppable的drop事件来做到这一点.

但是当可排序元素在可排序内部排序时,似乎也会触发此drop事件.而且我只想在从外部插入时修改掉落的元素.

$('#sortable').sortable().droppable({
// Drop should only fire when a draggable element is dropped into the sortables,// and NOT when the sortables themselves are sorted (without something being dragged into).
drop: function(ev,ui){
    $(ui.draggable).html('<div>TEMPLATE</div>');
}
});
$('#draggables li').draggable({
    connectToSortable: '#sortable',helper: 'clone',revert: 'invalid',cursor: 'move'
});​

Complete example on Fiddle.

如何在sortable中排序时修改drop-in元素而不修改它们？

解决方法

我从一个不同的角度遇到了同样的问题.我的sortable / droppable正在触发一个over事件和一个drop事件,当我想要的只是drop事件.使用您的代码,这是我修复它的方式：

$('#sortable').sortable()
    $('#draggables li').draggable({
        connectToSortable: '#sortable',cursor: 'move'
    });
    ​$('#sortable').sortable('disable'); 
    // disable the *sortable* functionality while retaining the *droppable*
    $('#sortable').droppable({
    // Drop should only fire when a draggable element is dropped into the sortables,// and NOT when the sortables themselves are sorted (without something being dragged into).
    drop: function(ev,ui){
        $(ui.draggable).html('<div>TEMPLATE</div>');
    }
    });

唯一的缺点是sortable.update事件中的所有功能现在必须放在droppable.drop事件中.

原文地址：https://www.jb51.cc/jquery/180621.html