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在可排序的丟棄火災事件

回答

相關問題