LoginSignup
0
0

More than 3 years have passed since last update.

ドラック&ドロップを実装する際に出会ったメソッドたち

Posted at

新たな出会いに感謝!!!
(マルチみたいw)

そんなことはどうでも良くて、初めてみたメソッドやプロパティなどを勉強してアウトプットしていく

・datatransfer
・prebentDefault
・ondragleave
・cursor:pointer(css)

datatransfer

DataTransfer オブジェクトは、ドラッグ&ドロップ操作中にドラッグされているデータを保持するために使用される=データを格納するための入れ物
(設定によっては文字をコピーすることが出来ないようにする事も出来る)

https://hakuhin.jp/js/data_transfer.html#DATA_TRANSFER_02

dataTransfer.setDatadeで指定された型のデータを設定
第一引数にはデータのタイプ名を指定
第二引数にはデータを指定(文字列)

ドラッグが開始したかを監視するのはondragstart

http://jsfiddle.net/radonirinamaminiaina/zfnj5rv4/

text/plainについては

https://developer.mozilla.org/ja/docs/DragDrop/Recommended_Drag_Types

prebentDefault

ある決まったクリック処理のブロックなどを行う。
単語の通り妨げるものである。

参考qiita
https://qiita.com/tochiji/items/4e9e64cabc0a1cd7a1ae
mdn
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault

まとめ
https://ja.javascript.info/mouse-drag-and-drop

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0