2

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

sortable 内でソートされているときに、ドロップイン要素を変更せずに変更するにはどうすればよいですか?

4

3 に答える 3

2

sortreceivesortable のイベントを使用できます。このイベントは、新しい要素がソート可能に挿入されたときに発生します。

経由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発射していました。あなたのコードを使用して、これを修正した方法は次のとおりです。overdropdrop

    $('#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 に答える