dataTransferオブジェクト
ドラッグ元とドロップ先の間でデータを転送します
「dataTransferオブジェクト」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
dataTransferが保持するデータ
dataTransferオブジェクトはすべてのドラッグイベントに関連付けられ、ドラッグ元とドロップ先の間で唯一の通信経路になります。ペイロードデータ、ファイル一覧、許可された効果、選択されたドロップ効果を保持します。
setDataとgetData
ドラッグ元はe.dataTransfer.setData(format, value)を使って、タイプ付きのペイロードを書き込みます。ドロップ先はe.dataTransfer.getData(format)を使って読み取ります。どちらの引数も文字列で、値は保存前に文字列へ変換されます。
src.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", "hello");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));
});複数のMIMEタイプ
同じペイロードを複数のタイプで保存すると、ドラッグ操作の相互運用性が高まります。「text/plain」はあらゆるテキストエディターで機能し、「text/uri-list」はブラウザによってURLとして認識され、「text/html」はワープロソフトで書式を保持します。ドロップ先は理解できるタイプを選択します。
drop以外での読み取り制限
プライバシー保護のため、ブラウザはdragenterおよびdragoverハンドラーに対して、e.dataTransfer.typesを通じてタイプの一覧だけを公開し、値は公開しません。実際のデータを読み取れるのは、ドロップを受け入れるターゲットのdropイベント内だけです。
filesリスト
ユーザーがデスクトップからドラッグすると、e.dataTransfer.filesはFileオブジェクトのFileListになります。ページ内から開始したドラッグでは空です。外部からのファイルドロップを検出し、サイズ、名前、タイプにアクセスするための正式な方法として扱ってください。
itemsコレクション
e.dataTransfer.itemsは、文字列とファイルの両方をDataTransferItemオブジェクトとして公開します。各項目にはkind（「string」または「file」）、type（MIME）、getAsString(cb) / getAsFile()があります。itemsは、filesとgetDataに代わる、現代的でタイプを認識できる手段です。
for (const item of e.dataTransfer.items) {
if (item.kind === "file") {
const file = item.getAsFile();
console.log(file.name);
} else {
item.getAsString((s) => console.log(item.type, s));
}
}effectAllowedとdropEffectの違い
effectAllowedはdragstartでドラッグ元が設定し、ドラッグ元がサポートする操作を列挙します。dropEffectはdragoverでドロップ先が設定し、その中から1つの操作を選択します。2つの指定が一致しない場合、ブラウザはドロップをキャンセルします。
カスタムドラッグ画像
e.dataTransfer.setDragImage(node, x, y)はデフォルトのゴースト画像を置き換えます。好みのスタイルを設定した画面外のDOM要素と、その要素に対するカーソルの相対オフセットを渡してください。この変更は現在のドラッグにだけ適用されます。
clearData
e.dataTransfer.clearData()はすべての形式を消去し、clearData("text/plain")は1つの形式だけを削除します。dataTransferはドラッグごとに新しく作成されるため、通常は必要ありません。ただし、データの設定を始めた後でキャンセルすると決めた場合には便利です。
クロスオリジンでの動作
オリジンAのページからオリジンBのページへドラッグされたファイルも、ドロップイベントとして配信されます。このAPIはオリジンをまたいで機能します。ただし、受け取り側のページが参照できるのは、送信元がdataTransferに明示的に設定したデータだけであり、任意のDOMへのアクセスは許可されません。
ブラウザからデスクトップへのドラッグ
「DownloadURL」タイプ（setData("DownloadURL", "image/png:filename.png:https://...")）を書き込むと、ページからブラウザの外へファイルをドラッグしてデスクトップに保存できるようになります。ブラウザの対応は限定的（Chromiumベースのブラウザのみ）なので、検出して適切にフォールバックしてください。
理解度チェック
dragoverイベント中にdataTransfer.getData()が実際に保存された値を返せないのはなぜですか？
まとめ
dataTransferはドラッグ元とドロップ先をつなぐ橋渡し役です。型付きの文字列ペイロードにはsetData/getDataを、ファイルと文字列を統一して扱うにはitemsを、デスクトップからのドロップにはfilesを、カスタムプレビューにはsetDragImageを使用します。また、effectAllowed/dropEffectで操作内容を調整します。
よくある質問
「dataTransferオブジェクト」レッスンは無料ですか？
はい。「dataTransferオブジェクト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「dataTransferオブジェクト」で何を学びますか？
ドラッグ元とドロップ先の間でデータを転送します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「dataTransferオブジェクト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- draggable属性とdragstartイベント
- dragoverとdropイベント
- dataTransferオブジェクト
- 実践：ドラッグで並べ替えるリスト