Drag and Drop

DataTransfer.clearData() メソッドは、ドラッグ操作のドラッグデータの中で指定された型のものを削除します。指定された型のデータが存在しない場合、このメソッドは何もしません。

DataTransfer コンストラクターは、新しい DataTransfer オブジェクトのインスタンスを作成します。

DataTransfer.dropEffect プロパティは、ドラッグ＆ドロップ操作中にユーザーに与えられるフィードバック（通常は視覚的）を制御します。これは、ドラッグ中に表示されるカーソルに影響します。例えば、ユーザーがターゲットのドロップ要素の上にカーソルを置くと、ブラウザーのカーソルが、どの種類の操作が発生するかを示すことができます。

DataTransfer.effectAllowed プロパティは、ドラッグ操作で許可される効果を指定します。コピー操作は、ドラッグされるデータを現在の位置からドロップ位置にコピーすることを示すために使用されます。移動操作は、ドラッグされるデータを移動することを示すために使用され、リンク操作は、ソース位置とドロップ位置の間に何らかの形の関係または接続を作成することを示すために使用されます。

files は DataTransfer オブジェクトの読み取り専用プロパティで、ドラッグ操作中のファイルのリストです。操作にファイルが含まれていない場合、リストは空になります。

DataTransfer.getData() メソッドは、指定した型のドラッグデータを（文字列として）受け取ります。ドラッグ操作がデータを含んでいない場合、このメソッドは空文字列を返します。

items は DataTransfer インターフェイスの読み取り専用プロパティで、ドラッグ操作でのDataTransferItemのDataTransferItemListです。リストには操作中のアイテムごとに 1 つの項目が含まれており、操作にアイテムがなかった場合はリストは空になります。

DataTransfer.setData() メソッドは、ドラッグ操作のドラッグデータに指定したデータと型を設定します。与えられた型のデータが存在しない場合、このデータはドラッグデータストアの末尾に加えられ、このような DataTransfer.types リストの最後の項目は新しい型になります。与えられた型のデータが存在する場合、既存のデータが同じ位置で置き換えられます。同じ型のデータが置き換えられる時、DataTransfer.types リストの並び順は変更されません。

ドラッグが発生すると、ドラッグ対象（HTMLElement/dragstart_event イベントが発生した要素）から半透明の画像が生成され、ドラッグ中にマウスポインターに沿って移動します。この画像は自動的に作成されるので、自分で作成する必要はありません。ただし、カスタム画像が必要な場合は、DataTransfer.setDragImage() メソッドを使用して、使用するカスタム画像を設定することができます。画像は通常、 img 要素になりますが、 canvas やその他の可視要素であっても構いません。

DataTransfer.types は読み取り専用プロパティで、 DataTransfer.items に存在する利用可能な型を返します。

DataTransferItem オブジェクトは、1 つのドラッグデータ項目を表します。ドラッグ操作中、それぞれの DragEvent は DragEvent.dataTransfer プロパティを持ち、このプロパティにはドラッグデータ項目の DataTransferItemList を含みます。リスト内のそれぞれの項目は DataTransferItem オブジェクトです。

アイテムがファイルの場合、 DataTransferItem.getAsFile() メソッドはドラッグデータ項目の File オブジェクトを返します。項目がファイルでない場合、このメソッドは null を返します。

getAsFileSystemHandle() は DataTransferItem インターフェイスのメソッドで、Promise を返します。これはドラッグ中の項目がファイルであれば FileSystemFileHandle で、ドラッグ中の項目がディレクトリーであれば FileSystemDirectoryHandle で履行されます。

DataTransferItem.getAsString() メソッドは、項目の DataTransferItem.kind が プレーン Unicode 文字列 （すなわち kind が string）である場合に、ドラッグデータ項目の文字列データを引数に指定してコールバックを呼び出すメソッドです。

DataTransferItem.kind プロパティは読み取り専用で、 ドラッグデータ項目 の種類（テキストまたはファイル）を表す DataTransferItem オブジェクトを返すものです。

DataTransferItem.type プロパティは読み取り専用で、ドラッグデータ項目を表す DataTransferItem オブジェクトの種類（形式）を返すものです。 type は一般的に MIME タイプで指定される Unicode 文字列ですが、MIME タイプである必要はありません。

DataTransferItemList オブジェクトは DataTransferItem オブジェクトのリストで、ドラッグされているアイテムを表します。ドラッグ操作の間、それぞれの DragEvent は DragEvent.dataTransfer プロパティを持ち、そのプロパティが DataTransferItemList となります。

DataTransferItemList.add() メソッドは、指定されたデータを使用して新しい DataTransferItem を作成し、ドラッグデータリストに追加します。アイテムは File または指定された種類の文字列です。リストへの追加が成功すると、新しく作成された DataTransferItem オブジェクトが返されます。

DataTransferItemList の clear() メソッドは、ドラッグデータアイテムリストからすべての DataTransferItem オブジェクトを削除し、リストを空にします。

length は DataTransferItemList インターフェイスの読み取り専用プロパティで、ドラッグアイテムリストの中に現在入っているアイテムの数を返します。

DataTransferItemList.remove() メソッドは指定された位置の DataTransferItem をリストから削除します。位置が 0 より小さいか、リストの長さより 1 だけ小さい値より大きい場合、リストは変更されません。

DragEvent インターフェイスは、ドラッグ＆ドロップ操作を表す DOM イベントです。ユーザーはタッチ面でポインティングデバイス（マウスなど）を置くことによりドラッグを開始して、ポインターを新たな場所（別の DOM 要素など）にドラッグします。アプリケーションは独自の方法で、ドラッグ＆ドロップの操作を自由に解釈できます。

DragEvent.dataTransfer プロパティは、ドラッグ操作のデータを（DataTransfer オブジェクトとして）保持します。

このコンストラクターは、合成した DragEvent オブジェクトを作成するために使用します。

drag イベントは、要素や選択されたテキストをユーザーがドラッグしている間に、数百ミリ秒ごとに発生します。

dragend イベントは、ドラッグ操作が終わろうとしているとき（マウスボタンを離したり、エスケープキーを押したりしたとき）に発生します。

dragenter イベントは、ドラッグ中のイベントやテキストの選択範囲が、有効なドロップターゲットに入ったときに発生します。ターゲットオブジェクトは、ユーザーが直接選択した要素（ドロップ対象としてユーザーが直接示した要素）、または body 要素です。

draggable は HTMLElement インターフェイスのプロパティで、要素がドラッグ可能かどうかを示す論理値プリミティブを取得または設定します。

dragleave イベントは、ドラッグしている要素や選択中のテキストが妥当なドロップターゲットを離れたときに発生します。

dragover イベントは、要素または選択されたテキストが、妥当なドロップターゲットの上にあるときに（数百ミリ秒間隔で）発生します。

dragstart イベントは、ユーザーが要素や選択されたテキストをドラッグし始めたときに発生します。

drop イベントは、要素または選択されたテキストが、妥当なドロップターゲットにドロップされたときに発生します。drop イベントが確実に期待通りに発生するように、dragover イベントを処理するコードの一部に preventDefault() 呼び出しを常に記載してください。