HTML5 ドラッグ アンド ドロップ

定義:

ドラッグ アンド ドロップは、オブジェクトを取得し、後で別の場所にドラッグする一般的な機能です。

HTML5 ではドラッグ アンド ドロップが標準の一部であり、あらゆる要素をドラッグ アンド ドロップできます。

1. 「ドラッグ アンド ドロップ イベント」について話しましょう

ドラッグ アンド ドロップ イベント、つまり、オブジェクトを掴んで別の場所にドラッグします

いくつかのイベントは、ドラッグ アンド ドロップされた要素でトリガーされます。一部はドロップ ターゲット トリガーでトリガーされます。要素がドラッグされると、dragstart イベント、drag イベント、dragend イベントが順番にトリガーされ、要素が有効なドロップ ターゲットにドラッグされると、dragenter イベント、dragover イベント、dragleave、またはdrop イベントが順番にトリガーされます。

2. 実装プロセス

要素をドラッグ可能に設定します

<imgraggable="true">

何をドラッグするか？要素がドラッグされると、発生するイベント (ondragstart および setData())

ondragstart 属性は関数を呼び出し、drag(event) はドラッグされたデータの表示を指定し、dataTransfer.setData() はドラッグされたデータのデータ型を設定し、価値。

functionrag(ev){

ev.dataTransfer.setData("Text",ev.target.id);

}

どこに置きますか？ ondragover イベントは、ドラッグされたデータを配置する場所を指定します
デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する場合は、要素のデフォルトの処理を禁止する必要があります。したがって、ondrop は、ondragover イベントのevent.preventDefault() メソッドを通じて配置する必要があります

まず、preventDefault() を呼び出してブラウザのデフォルトのデータ処理を回避し、次に dataTransfer を使用します。 getData( "Text") メソッドでドラッグされたデータ (ドラッグされた要素の ID) を取得します。最後に、ドラッグされた要素が配置された要素に追加されます。

関数drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild (document.getElementById(data));

}

各属性のドラッグアンドドロップ(Drag and Drop)ライフサイクル

今、ondragstart など、いくつかの新しい属性用語を見てきました。まだ馴染みがないかもしれませんが、その理由は次の表を見れば明らかかもしれません:

ドラッグ ライフ サイクル プロパティ. ドラッグ要素)

りー