JavascriptとHTML5でドラッグ&ドロップしてみた
アプリの中でブラウザ上でアイテムをドラッグ&ドロップでボックスに
自由に移動できる動作が必要になったので色々探してみた。
最初はenchant.jsで実現できるようだったけど、色々と面倒なことがあったので、
探してみたら普通にHTML5とJavascriptでできることがわかったのでまとめる。
ちなみにenchant.jsだとこれ。
enchant.jsでドラッグ&ドロップ - jsdo.it - Share JavaScript, HTML5 and CSS
Javascript
ドラッグ時の処理
- ドラッグする要素のIDをDataTransferオブジェクトにセット。
ドラッグしている要素がdropboxゾーンと重なっているとき
- dropboxが要素を受け入れるために、イベントをキャンセルする。
ドロップ時の処理
- DataTransferオブジェクトから、要素のIDを取得。
- 要素のIDから要素を取得。
- ドロップ時に要素をdropboxゾーンに追加。
- イベントをキャンセル。
HTML
デモ
はじめてのjsdo.itデビューしたぁ
イメージとしてはボックス内の好きな箇所に自由に配置できるようなのが
欲しい。もっといいやり方あったら、ぜひ教えてください。
例えば、こんなやつ
→HTML5 Drag and dropを実装してみよう | Dress Cording