togatttiのエンジニアメモ

過度な期待はしないでください.

JavascriptとHTML5でドラッグ&ドロップしてみた

アプリの中でブラウザ上でアイテムをドラッグ&ドロップでボックスに
自由に移動できる動作が必要になったので色々探してみた。

最初はenchant.jsで実現できるようだったけど、色々と面倒なことがあったので、
探してみたら普通にHTML5Javascriptでできることがわかったのでまとめる。

ちなみにenchant.jsだとこれ。
enchant.jsでドラッグ&ドロップ - jsdo.it - Share JavaScript, HTML5 and CSS

Javascript


ドラッグ時の処理

  • ドラッグする要素のIDをDataTransferオブジェクトにセット。

ドラッグしている要素がdropboxゾーンと重なっているとき

  • dropboxが要素を受け入れるために、イベントをキャンセルする。

ドロップ時の処理

  • DataTransferオブジェクトから、要素のIDを取得。
  • 要素のIDから要素を取得。
  • ドロップ時に要素をdropboxゾーンに追加。
  • イベントをキャンセル。

CSS

HTML

デモ

はじめてのjsdo.itデビューしたぁ

イメージとしてはボックス内の好きな箇所に自由に配置できるようなのが
欲しい。もっといいやり方あったら、ぜひ教えてください。

例えば、こんなやつ
HTML5 Drag and dropを実装してみよう | Dress Cording

参考:
ドラッグ&ドロップ-HTML5のAPI、および、関連仕様