HTML5 ドラッグ アンド ...LOGIN

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

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

ドラッグ中 スクリプトスクリプトがドラッグされている限り許可されます (オブジェクトはドラッグされた要素です)

ドラッグ中 ondragenter スクリプト 要素が正当なドロップターゲットにドラッグされたら、スクリプトを実行します (オブジェクトはターゲット要素です)

ドラッグ中ondragover スクリプトの処理 要素が正当な配置ターゲットにドラッグされている限り、スクリプトを実行します (オブジェクトはターゲット要素です)

ドラッグプロセス中 ondragleave スクリプト 要素が正当な配置から離れるとき ターゲット (オブジェクトがターゲット要素である) target 要素)

ドラッグ終了 ondrop スクリプト ドラッグされた要素がターゲット要素に配置されたときにスクリプトを実行します (オブジェクトがターゲット要素です)

ドラッグ終了 ondragend スクリプト ドラッグ操作が終了したときにスクリプトを実行します (オブジェクトはドラッグされた要素です)要素)

りー

次のセクション
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖拽</title> <style type="text/css"> .div{ float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script type="text/javascript"> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" class="div" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="80" height="30"> </div> <div id="div2" class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
コースウェア