はじめに
はじめまして！ADUシステムのトゥオンと申します。
現在沢山のウェブサイトがDrag/Dropを使っています。Drag/Dropを使う時、対象の変更を見やすいし、理解しやすいです。例えば、 タスク管理のウェブサイトやスケジュール管理のウェブサイトなどです。
最近、要件定義のため、いくつかMockUp HTMLを作りました。その時に、Drag/Drop（ドラッグ＆ドロップ）を触る機会がありまて、すごく面白いと思いましたので、今回Drag/Dropについて、話させていただきたいと思います。
Drag/Drop HTML5
HTML5を発表する時に、Drag/DropのAPIが追加されましたので簡単な記述でドラッグ＆ドロップの機能が扱えます。
Drag/Dropを利用したい場合、draggable="true"を付けるだけです。
HTML5サンプルコードを見てみましょう
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<html> <head> <script> <! ドロップのところに、このイベントを追加する> function allowDrop(ev) { ev.preventDefault(); } <! ドラッグしたい画像にこのイベントを追加する> function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } <! ドロップしたら、このイベントを実行する> function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div style="width: 200px;height:200px;background-color: antiquewhite;border: ridge;text-align: center;" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <h5>画像をここに移動しましょう</h5> </div> <img id="drag1" src="aa-icon.png" draggable="true" ondragstart="drag(event)" > </body> </html> |
結果はこんな感じです。
おまけ：HTML5にJSがサポートしたイベント
| イベント | 内容 |
|---|---|
| dragstart | ドラッグ開始時 |
| drag | ドラッグ中 |
| dragend | ドラッグ終了時 |
| dragenter | ドラッグしている要素がエリアに入った時 |
| dragleave | ドラッグしている要素がエリアから出た時 |
| dragover | ドラッグしている要素がエリア上に居る時 |
| drop | ドロップ中 |
Drag/Drop JSライブラリ
HTML5がサポートしているDrag/Dropは簡単ですけど、もっと何かしら（アニメーションやイベントなど）が欲しがる場合、JavaScriptプラグインを利用できます。
- Dracula
https://github.com/bevacqua/dragula
https://bevacqua.github.io/dragula/ - Dragster
https://github.com/bensmithett/dragster
https://bensmithett.github.io/dragster/
さいごに
Drag/Dropについての話はまだ少ないかかもしれませんが、興味があれば、触ってみてください。
以上です。
