More than 3 years have passed since last update.

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

Posted at 2020-12-09

新たな出会いに感謝！！！
(マルチみたい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