最近、Vue.Draggable を使う機会があったのですが、ドラッグ&ドロップで要素を並び替えたときにどのような順序でイベントハンドラが呼ばれるのか気になったので調べてみました。とりあえず、以下に記載されているイベントハンドラを対象にします。ちなみに、move イベントは SortableJS の move プロパティを利用するようです。
サンプルコードはこちら。
結果
呼び出しの順序は以下の通り。右端の数字は操作の番号と対応する。
パターン1
1) クリック ⇒ 2) ドラッグ ⇒ 3) 入れ替え ⇒ 4) ドロップ
- onchoose > (1)
- onclone > (2)
- onstart > (2)
- onmove > (3)
- onupdate > (4)
- onsort > (4)
- onend > (4)
パターン2
1) クリック ⇒ 2) ドロップ (※ドラッグなし)
- onchoose > (1)
パターン3
1) クリック ⇒ 2) ドラッグ ⇒ 3) ドロップ (※入れ替えなし)
- onchoose > (1)
- onclone > (2)
- onstart > (2)
- onend > (3)
パターン4
1) クリック ⇒ 2) ドラッグ ⇒ 3) 入れ替え ⇒ 4) 戻す ⇒ 5) ドロップ
- onchoose > (1)
- onclone > (2)
- onstart > (2)
- onmove > (3)
- onmove > (4)
- onend > (5)
パターン5
1) クリック ⇒ 2) ドラッグ ⇒ 3) 入れ替え ⇒ 4) 入れ替え ⇒ 5) ドロップ (※2行移動)
- onchoose > (1)
- onclone > (2)
- onstart > (2)
- onmove > (3)
- onmove > (4)
- onupdate > (5)
- onsort > (5)
- onend > (5)
まとめ
調べてはみたけど、Sortable の README.md などを読めばなんとなくイメージできるかもしれないですね...。
現場からは以上です。
