APIドラッグアンドドロップAPI – HTML。ドラッグアンドドロップAPIはネイティブHTML5です…| onyx | 2025年5月

1. ドラッグアンドドロップAPIとは何ですか？
2. 重要な概念
3. ドラッグアンドドロップのイベントフロー
4. DatAtransferオブジェクト
5. ドラッグアンドドロップを実装する方法
6. JavaScriptロジックが説明しました
7. 変数と関数の内訳
8. それをすべてまとめる

HTMLドラッグアンドドロップAPI ユーザーを許可します 要素をドラッグします （ファイル、画像、Divなど）および 別の要素にドロップします、Webページでの直感的なユーザーインタラクションを有効にします。

このAPIは最新のブラウザに自生しており、jQueryのような外部ライブラリは必要ありません。

1。ドラッグ可能な属性

設定によりHTML要素をドラッグ可能にするために使用されます draggable="true"。

2。イベントをドラッグします

ドラッグアンドドロップ中にいくつかのイベントがトリガーされます。

• dragstart – ドラッグが始まるとき
• drag – ドラッグ中
• dragenter – ドラッグされたアイテムがターゲット要素に入ると
• dragover – ターゲットの上にホバリングしながら
• dragleave – ターゲットを離れるとき
• drop – アイテムが削除されたとき
• dragend – ドラッグ完了後

3.データトランファーオブジェクト

このオブジェクトは、ドラッグ操作中にデータを保持し、そのデータを管理する方法を提供します。

• setData(format, data) – データを保存します
• getData(format) – 保存されたデータを取得します
• clearData() – データを削除します
• effectAllowed、 dropEffect – ドラッグ効果を制御します

基本的なDNDには次のイベントのみが必要です。

ステップ1：要素をドラッグ可能にします

セット draggable="true" そして使用します ondragstart ドラッグの開始を処理します。

ステップ2：ハンドル dragstart

このイベントを使用して、ドラッグされているものに関するデータを保存します。

function dragStart(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}

ステップ3：ドロップを許可します（dragover））

デフォルトでは、ドロップは許可されていません。使用 event.preventDefault() それを有効にするため。

function allowDrop(event) {
event.preventDefault();
}

ステップ4：ハンドル drop

データを取得し、ユーザーがドロップする場所に配置します。

function drop(event) {
event.preventDefault();
const id = event.dataTransfer.getData("text/plain");
const draggableElement = document.getElementById(id);
event.target.appendChild(draggableElement);
}

ドラッグアンドドロップがコードで段階的に段階的に機能する方法の内訳を説明します。

🧲使用する変数

• draggedTask：現在ドラッグされている要素への参照を保存します（オプションですが役立ちます）。
• event.dataTransfer：イベント間でデータを渡すために使用される組み込みオブジェクト。

🧠使用された関数

1。 dragStart(event)

• ドラッグが始まるときにトリガーされます
• ドラッグされた要素のIDを保存します dataTransfer

function dragStart(event) {
event.dataTransfer.setData("text", event.target.id);
}

2。 allowDrop(event)

• ブラウザのデフォルト動作を防ぐことにより、ドロップを許可します

function allowDrop(event) {
event.preventDefault();
}

3。 drop(event)

• ドラッグされたIDを取得します
• 対応するDOM要素を取得します
• 新しい親にそれを追加します（ドロップゾーン）

function drop(event) {
event.preventDefault();
const id = event.dataTransfer.getData("text");
const draggableElement = document.getElementById(id);
event.target.appendChild(draggableElement);
}

3つの列（「やる」、「進行中」、「完了」）を備えたシンプルなタスクボードを作成し、各タスクをドラッグ可能にすることができます。各列はaです ドロップゾーン それは次のことを聞きます dragover そして drop イベント。外部ライブラリは必要ありません – これはすべて使用可能です Vanilla JavaScriptおよびHTML。

• ドラッグアンドドロップAPIは、イベントの流れと DataTransfer 物体。
• テキスト、ファイル、画像、HTML要素などのドラッグアンドドロップをサポートします。
• ファイルアップロード、かんばんボード、インタラクティブUIなどの高度な機能のために拡張できます。