我有一个可以放入(现有)可排序列表中的元素列表。 当droppable元素被放入sortables时,我想修改该元素。我通过调用droppable的drop事件来做到这一点。
但是当可排序元素在sortable中排序时,似乎也会触发此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'
});
如何在可排序的内部进行排序时修改掉入的元素而不修改它们?
答案 0 :(得分:2)
您可以使用可排序的sortreceive
事件。将新元素插入可排序项时会触发此事件。
通过ui.helper
,您可以访问新插入的元素。
$('#sortable').sortable().droppable().on('sortreceive', function(event, ui) {
var inserted_element = $(ui.helper);
// modify your element
});
答案 1 :(得分: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('<div>TEMPLATE</div>');
}
});
唯一的缺点是sortable.update
事件中的所有功能现在都必须放在droppable.drop
事件中。
答案 2 :(得分:1)
也许这会有所帮助:
看到这个代码的小提琴,我改变它:
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'
});