jQuery UI在可排序的丢弃火灾事件

我有一个可以放入（现有）可排序列表的元素列表。将可拖放元素拖放到可排序列表中时，我想修改该元素。我通过调用droppable的drop事件来做到这一点。jQuery UI在可排序的丢弃火灾事件

但似乎这个放置事件也会在可排序元素在排序内排序时触发。我只想修改从外部投入时丢弃的元素。

$('#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。

如何在排序内部排序时修改插入元素而不修改它们？

来源

2012-02-28 John B.

发生这种情况的原因似乎是，默认情况下可排序的项目具有可拖动项目的属性 - 至少根据文档。 http://jqueryui.com/demos/sortable/ – gailbear 2012-02-28 22:30:43

我刚刚从另一个角度遇到了同样的问题。当我想要的是drop事件时，我的sortable/droppable发起了一个over事件和一个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('<div>TEMPLATE</div>'); 
    } 
    });

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

来源

2012-11-19 14:51:07 DevlshOne

通过你的代码的外观，并尝试它后，所有'$（“＃sortable”）。sortable（'disable'）;'确实是禁用所有的完全可分类的功能，使得列表100％的时间无法使用。我只是不低调，因为我可能会犯错误？ – VoidKing 2013-09-06 17:06:34

也许这可以帮助：

看到这个捣鼓代码，我改变它：

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

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

来源

2013-12-03 20:55:55 penjepitkertasku

您可以使用sortreceive事件排序的。当一个新元素被插入可排序元素时，此事件被触发。

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

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

来源

2014-11-12 16:41:38 juffel

jQuery UI在可排序的丢弃火灾事件

回答

相关问题