ドラッグアンドドロップの実装で必要な機能

Vue.jsでドラッグアンドドロップの実装をしている時に必要な機能とは何だろうかと考えてみました。

その時にふっと思いましたのがドラッグアンドドロップってクレーンゲームと同じなのではということです。

ドラッグアンドドロップには7つもイベントがありますが、

基本的にドラッグアンドドロップで必要な機能は大きく分けて3つ

①dragstart

②dragover

③drop

これをクレーンゲームにあてはめると

①マウスでドラッグしたいところまで移動

　⇒クレーンを景品の上まで移動させる

　ここはマウスの移動だけなので特に実装はなし

②クリックしたままにする

　⇒クレーンで景品をつかむ

　　ondragstart

③クリックしたままで移動

　⇒クレーンで景品をつかんだまま、移動先まで移動

　　dragover

④移動先でクリックを外す

　⇒移動先でクレーンが景品を離す

　　drop

ドラッグアンドドロップを実装するとき必要な機能は何ぞやと

なった時に思い出してもらえると嬉しいです。