DnD.md

D&D！

ドラッゲンドロップぅ

Event

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

draggable属性

• ドラッグしたい要素にはdraggable属性にtrueを指定する必要がある
• 一部要素は最初からドラッグ可能。imgとか

dragoverイベント

• ドロップを受け付ける要素のdragoverイベント内でpreventDefault()をする
• これによってその要素がdropを許可することを示す
• dragoverイベントは要素の上にカーソルが間、連続してイベントが発生し続ける
• 処理は書かないほうがよい

dataTransfer

• データの受け渡しはevent.dataTrasnferオブジェクトを通じて行う

• dataTransfer.setData('key', value)

• dataTransfer.getData('key')

• key:valueはStringで

dataTransfer.setDragImage

• ドラッグ開始時にドラッグするゴースト画像を設定できる
• 画像のパス or img要素が指定できる

デモ

ハマったこと

• スタイルあてるのめんどくさい
  • z-indexに左右される
• ドラッグ対象が不可視になるとdragendになる
• 自分自身にもdropできる
  • dragenter``dragleaveなども全部発生する
• imgをつかんじゃう
  • divを掴みたいならその下のimgをdraggable=falseしとく

カスタマイズしづらい

それでも使う意味

• HTML5なのです
• 標準なのです

使う場面がなかなか思いつかない

おしまい