DnD


ドラッゲンドロップぅ

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なのです
  • 標準なのです

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

おしまい

Made with Slides.com