2

我有一个可以放入（现有）可排序列表中的元素列表。当可放置元素被放入可排序元素时，我想修改该元素。我通过调用 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'
});​

Fiddle 上的完整示例。

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

4

3 回答 3

2

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

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

  $('#sortable').sortable().droppable().on('sortreceive', function(event, ui) {
    var inserted_element = $(ui.helper);
    // modify your element
  });
于 2014-11-12T16:41:38.837 回答
1

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

    $('#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-19T14:51:07.510 回答
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'
});
于 2013-12-03T20:55:55.810 回答