JavaScript / ドラッグアンドドロップ

こんにちは。トキです。
今日は映画ビューティフルマインドを観ました。良かったです。映画イミテーションゲームがオマージュしてるんじゃないかってくらい取り巻きのキャラとか展開似てましたね。

さて、今回はJavaScriptでドラッグ&ドロップ(以下DnDと書きます)する方法をまとめたいと思います。
サンプル↓

See the Pen REbeVr by b07nji (@b07nji) on CodePen.

DnDの基本

DnDを実現するには、

HTML側
JS側

のそれぞれで処理が必要になります。

順に見ていきましょう。

HTML: ドラッグする要素にdraggable属性の指定

HTML側では、ドラッグする要素にdraggableを指定することで、ドラッグができるようになります。指定する値は、true / false / 値なしのいずれか。
サンプルではtrueを指定してます。

<p id="apple" draggable="true" ondragstart="dragstart(event);">Drag Me!</p>

JS: DataTransferオブジェクトを介してドラッグデータをドロップ先へ渡す

JS側では、

ドラッグ時にDataTransferオブジェクトにドラッグするデータをセット
ドロップ時に、セットされた値を取り出しドロップ先に渡す

以上のステップで、DnDが可能になります。

DataTransferオブジェクトは、DnDの実行中にデータを保持するために使われるオブジェクトで、データ保存時にはsetData()メソッド、データ取得時にはgetData()メソッドを使います。
データの保存

function drag(event) {
    //1. イベントを発生させたオブジェクトを取得
    var id = event.target.id;
    //2. 取得したオブジェクトをセット
    event.dataTransfer.setData("id", id);
}

event.targetは、イベントが発火した要素を参照します。今回の場合は、ドラッグする際にクリックした要素。

データの取得

function drop(event) {
    //1. ドラッグしたオブジェクトを取得
    var id = event.dataTransfer.getData("id");
    //2. オブジェクトの要素を取得
    var e = document.getElementById(id);
   //3. ドロップ先に要素を追加
    event.currentTarget.appendChild(e);
}

event.currentTargetは、イベントが通過した時の要素を参照します。今回の場合は、マウスオーバーした要素。

また、ドロップ先の要素がドロップを受け付けるようにする必要があります。

function enableDrop(event) {
    event.preventDefault();
}

以上のようにすることで、DnDが実装できます。

ここまでご覧になられた方、ありがとうございました。
もしベターな方法や、コードに間違いなどがあればコメントいただけると幸いです。

それではまた～