jQuery UIのドロップ可能な火災のソート可能なイベントのドロップイベント

Question

（既存の）ソート可能なリストにドロップできる要素のリストがあります。 droppable要素がソート可能要素にドロップされたとき、要素を変更したいと思います。私は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' 
});​ 

Complete example on Fiddle。

ソート可能な内部でソートされたときに、ドロップインされた要素を変更せずに変更するにはどうすればよいですか？

Answer 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イベントに置かなければならないということです。

Answer 2

は、おそらくこれが助けることができる：

をコードについては、このフィドルを参照してください、私はそれを変更する：あなたはソート可能なのsortreceiveイベントを使用することができ

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

。このイベントは、新しい要素がソート可能オブジェクトに挿入されたときに発生します。

経由でui.helperあなたは新しく挿入された要素にアクセスできます。

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