HTML のドラッグ&ドロップの使い方を確かめる。 仕様は MDN Web Docs を参照させていただく。

ドラッグするだけ、つまり、要素を掴んで動すだけだったら、 draggable 属性を true にすればよい。

次の button 要素は draggable 属性が無い。これは掴んで動かせない。

次の button 要素は draggable 属性を true にした。これは掴んで動かせる。

ドラッグ中のインタラクティブな反応やドロップ時の挙動を加えようとすると、イベント処理を実装していかないといけな。 イベントの種類や実装の例は MDN Web Docs に詳しい記載がある。

SAFE Stack でドラッグ&ドロップを使いたくて調べているのだが、多分、SAFE Stack でもいけそう。 Fliz の対応するプロパティ (link) を見ると以下が定義されている。

  • draggable
  • onDrag
  • onDragEnd
  • onDragEnter
  • onDragExit
  • onDragLeave
  • onDragOver
  • onDragStart
  • onDrop