JQuery UI падение события сбрасываемых пожаров на сортируемом

Question

У меня есть список элементов, которые можно поместить в список (существующих) сортируемых элементов. Когда сбрасываемый элемент помещается в сортируемые элементы, я хочу изменить этот элемент. Я делаю это, вызывая событие drop для droppable.

Но, похоже, это событие сброса также запускается, когда сортируемые элементы сортируются внутри сортируемых. И я хочу изменить только удаляемый элемент, когда он находится снаружи.

$('#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'
});​

Полный пример на скрипке .

Как я могу изменить вставленный элемент, не изменяя его при сортировке внутри сортируемого?

Answer 1

Вы можете использовать событие sortreceive сортируемого.Это событие вызывается, когда в сортируемый элемент вставляется новый элемент.

Через ui.helper вы можете получить доступ к вновь вставленному элементу.

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

Answer 2

возможно, это может помочь:

См. Эту скрипку для кода, я ее изменяю:

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'
});

Answer 3

Я только что столкнулся с той же проблемой под другим углом. Мой 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.