JavaScript Academy · レッスン

ドロップ先と dataTransfer

Q: 「ドロップ先と dataTransfer」で何を学びますか？

ドロップを受け付け、データを転送します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

ドロップを受け付け、データを転送します。

「ドロップ先と dataTransfer」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

ドロップ先になる条件

デフォルトでは、要素はドロップを拒否します。ドロップを受け付けるには、dragoverとdropの両方でデフォルトの動作をキャンセルする必要があります。これは最もよくある落とし穴です。

dragover でドロップを許可する

ブラウザーは、dragover ハンドラー内で preventDefault() を呼び出さない限り、ドロップをブロックします。これを行わないと、drop イベントは発生しません。

const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
  e.preventDefault(); // REQUIRED to allow drop
});

drop イベント

ユーザーが有効なターゲット上でポインターを離すと、drop が発生します。ここでもデフォルト動作を防止してください（ドロップされたファイルや URL をブラウザーが開くのを防ぎます）。そのうえでデータを読み取ります。

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  console.log("Dropped", id);
});

dataTransfer の読み取り

getData(format) は、dragstart で保存されたデータを取得します。format 文字列は、設定時に使用したものと一致している必要があります。

const payload = e.dataTransfer.getData("text/plain");

要素を移動する

典型的な用途は、転送した id を使って、ドラッグしたノードをドロップゾーンに追加することです。

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  zone.appendChild(dragged);
});

複数のデータ形式

dataTransfer には、text/plain と application/json など、複数の形式を同時に保持できます。ターゲットは、自身が理解できる形式を読み取ります。

e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));

dropEffect を設定する

dragover で dropEffect を "copy"、"move"、または "link" に設定すると、カーソルと操作の意味を制御できます。

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
});

effectAllowed と dropEffect

effectAllowed（ソースが設定）は許可される操作を宣言し、dropEffect（ターゲットが設定）はその中から1つを選択します。両者が連携して適切なカーソルを表示します。

リストの並べ替え

ドロップ位置と挿入を組み合わせると、項目を並べ替えられます。カーソル下の要素の前後どちらに挿入するかを判断します。

list.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  list.insertBefore(dragged, e.target);
});

ドロップターゲットを特定する

e.target（ポインター下の要素）と closest() を使うと、ターゲットが入れ子になっている場合でも、該当するコンテナーを見つけられます。

zone.addEventListener("drop", (e) => {
  const slot = e.target.closest(".slot");
  if (slot) slot.appendChild(getDragged(e));
});

データを消去する

dataTransfer.clearData() は保存されたデータを空にします。形式を渡すと、その形式だけを消去します。いずれにせよ、ドラッグの終了後にはストアが自動的にリセットされます。

e.dataTransfer.clearData("text/plain");

クイックチェック

ドロップターゲットをテストします。

まとめ: ドロップターゲットと dataTransfer

dragover と drop で preventDefault() を呼び出してドロップゾーンを作成し、getData でペイロードを読み取り、要素の移動と並べ替えを行い、dropEffect を設定し、入れ子になったターゲットを処理しました。次は視覚的なフィードバックです。

よくある質問

「ドロップ先と dataTransfer」レッスンは無料ですか？

はい。「ドロップ先と dataTransfer」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「ドロップ先と dataTransfer」で何を学びますか？

ドロップを受け付け、データを転送します。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「ドロップ先と dataTransfer」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る