1

ulドラッグ可能なアイテム、(#doc-editor-options ul li)それらのアイテムをドロップするための領域、およびそれらのアイテム(#doc-editor-content)をul保持するためのその領域内に、並べ替え可能なアイテム(#items-holder)があります。このドラッグアンドドロップは一方向のみであり、リストのアイテムのみをホルダーにドラッグアンドドロップできます。

$("#doc-editor-options ul li").draggable({
    helper: 'clone',
    connectToSortable: '#item-holder',
    containment: $(".doc-editor")
});
$("#doc-editor-content").droppable({
    drop: function(e, ui){
        console.log('dropped');
    }
});
$("#item-holder").sortable({
    placeholder: 'placeholder-highlight',
    cursor: 'pointer',
});

私が持っている2つの質問：

  1. 現在、リストからアイテムをドラッグして他のリストにドロップすると、のdropコールバック.droppable()が2回呼び出されます。#item-holderこれは、ソート可能であることと関係があると思います。eventアイテムをリストにドロップし、そのアイテムとuiコールバックについてのみ知っている場合にのみ起動されるようにします。
  2. items-holderデフォルトでソートできない機能も必要です。並べ替え可能になるのは、アイテムをドラッグしてホバーしているときだけです。そのため、デフォルトではリストを並べ替えることはできませんが、アイテムをリストにドラッグすると、そのアイテムをリスト内のどこに配置するかを選択でき（つまり、リストは並べ替え可能になります）、一度ドロップすると、リストは並べ替えできなくなりますまた。

編集：私は＃2を理解しました、私mousedownはソートを有効にしてからそれを無効にするドラッグ可能なアイテムにバインドする必要がありましたmouseup。＃1でまだ問題が発生しているので、アイテムをアイテムホルダーにドロップしたり、アイテムホルダーからホバーしたりすると、一部のsortableイベントでコールバックが発生しているようです。drop

4

1 に答える 1

8

1：

connectToSortableもdrop（）をトリガーしているため、drop（）は2回呼び出されます。

私の提案は、$（ "＃doc-editor-content"）。droppable（）を完全に削除し、代わりにreceive（e、ui）ハンドラーをソート可能オブジェクトに追加することです。

2：

修正は機能します。ただし、もっと簡単な方法をお勧めします。並べ替え可能ファイルを常に有効にして、オプション「handle：h2」を追加します。（LI内に存在しないタグを選択します。）これにより、リストにドロップできますが、ユーザーによるインプレースソートは無効になります。

例：

$('#item-holder').sortable({
  placeholder: 'placeholder-highlight',
  cursor: 'pointer',
  handle: 'h2',
  receive: function(e, ui) {
    console.log('dropped');
  }
});
于 2011-03-30T20:11:24.483 に答える