droppable的jQuery UI drop事件在sortable上触发 [英] jQuery UI drop event of droppable fires on sortable
问题描述
我有一个元素列表,可以将这些元素放入(现有)可排序列表中. 当将droppable元素放入sortables中时,我想修改该元素.我通过调用droppable的drop事件来做到这一点.
I have a list of elements that can be dropped into a list of (existing) sortables. When a droppable element is dropped into the sortables, I want to modify the element. I do this by calling the drop event of droppable.
但是,当可排序元素在可排序内部进行排序时,似乎也会触发此drop事件.而且,我只想在从外部插入时修改放置的元素.
But it seems this drop event is also fired when the sortable elements are sorted inside sortable. And I only want to modify the dropped element when dropped-in from the outside.
$('#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'
});
在可排序内部进行排序时,如何在不修改插入元素的情况下修改它们?
How can I modify a dropped-in element without modifying them when sorted inside of sortable?
推荐答案
我只是从另一个角度遇到了相同的问题.当我想要的只是drop
事件时,我的sortable/droppable
触发了over
事件和drop
事件.使用您的代码,这是我修复它的方法:
I just ran into the same issue from a different angle. My sortable/droppable
was firing off an over
event and a drop
event when all I wanted was the drop
event. Using your code, here's how I fixed it:
$('#sortable').sortable()
$('#draggables li').draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid',
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
事件中.
The only disadvantage is that all functionality within the sortable.update
event must now be placed in the droppable.drop
event.
这篇关于droppable的jQuery UI drop事件在sortable上触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!