我有一个可以放入(现有)可排序列表中的元素列表.
当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事件中.
