我有一个可以放入(现有)可排序列表中的元素列表.
当droppable元素被放入sortables时,我想修改该元素.我通过调用droppable的drop事件来做到这一点.
当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'
});
解决方法
我从一个不同的角度遇到了同样的问题.我的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事件中.
