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('
TEMPLATE
'); } }); $('#draggables li').draggable({ connectToSortable: '#sortable', helper: 'clone', revert: 'invalid', cursor: 'move' });​ 

小提琴上的完整例子 。

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

Answer 1

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

  $('#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('
TEMPLATE
'); } }); 

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

Answer 2

也许这可以帮助：

看到这个小提琴的代码，我改变它：

http://jsfiddle.net/penjepitkertasku/CxpMn/34/

 $('#sortable').sortable(); $('#sortable').droppable({ drop: function(ev, ui){ $(ui.draggable).html('
' + ui.draggable.text() + '
'); } }); $('#draggables li').draggable({ connectToSortable: '#sortable', helper: 'clone', revert: 'invalid', cursor: 'move' }); 

Answer 3

您可以使用sortable的sortreceive事件。 将新元素插入sortable时会触发此事件。

通过ui.helper您可以访问新插入的元素。

  $('#sortable').sortable().droppable().on('sortreceive', function(event, ui) { var inserted_element = $(ui.helper); // modify your element });