jQuery UI dropable事件的droppable fires on sortable

前端之家收集整理的这篇文章主要介绍了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元素而不修改它们?

@H_403_11@

解决方法

我从一个不同的角度遇到了同样的问题.我的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事件中.

@H_403_11@ @H_403_11@

猜你在找的jQuery相关文章