html5 のドラッグ アンド ドロップ、および他の監視イベントと実行の順序を理解するのに 5 分かかります。
定義と使用法ドラッグ アンド ドロップのプロセス中に次のイベントがトリガーされます。
ドラッグ ターゲット (ソース要素) でイベントをトリガーします。
ターゲットが解放されたときにトリガーされるイベント:
Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari はドラッグをサポートしています。
注: Safari 5.1.2 はドラッグをサポートしていません。要素をドラッグすると、ondragover イベントが 350 ミリ秒ごとにトリガーされます。
例は次のとおりです。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換性のあるコンテンツ=ie=edge> <title>5 分間のドラッグ アンド ドロップの簡潔な例</title> <style> #draggable { width: 200px; height: 20px; テキスト整列: 背景: 白; .dropzone { 幅: 200px; 余白: 10px; } .addEventListener(dragstart, function (event) { console.log('==========dragstartドラッグ開始 ==========ドラッグは 1 回だけ実行されます'); // ドラッグされた要素の参照を保存します (ref.) ドラッグ =event.target; // 半透明にします。 style.opacity = .5; }, false); /* ターゲット要素がドラッグされるとドラッグ イベントがトリガーされます*/ document.addEventListener(drag, function (event) { // console.log('==========drag=========要素がドロップされるまでドラッグは監視を続けます'), /* ターゲットを配置するときelement トリガーイベント */ document.addEventListener(dragover, function (event) { // console.log('==========dragover========== ドラッグ時に常にリッスンします。要素が削除されるまで'); // デフォルトのアクションを無効にしてドロップを有効にします。event.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('==========dragenter は要素をターゲット要素にドラッグします========= に相当しますtoragleave '); // ドラッグ可能な要素がドロップゾーンに入ったときにターゲット ノードをハイライトします if (event.target.className ==dropzone) {event.target.style.background = purple); document.addEventListener(dragleave, function (event) { console.log('==========dragleave は要素をターゲット要素からドラッグします==========dragenter に対応します') ; // ドラッグされた要素がドロップ可能なターゲット ノードから離れると、その背景をリセットします if (event.target.className == dropzone) {event.target.style.background = }, document.addEventListener(drop, function); （イベント ） { console.log('==========drop ドロップ要素=========ドラッグは 1 回のみ実行され、ドラッグ入力前にトリガーされます' // デフォルトのアクション (開くなど) を防止します。一部の要素へのリンク)event.preventDefault(); // ドラッグされた要素を選択したドロップ ゾーン ノードに移動します if (event.target.className == Dropzone) {event.target.style.background = ;ドラッグされた); event.target.appendChild(dragged); } }, false); document.addEventListener(dragend, function (event) { console.log('=========dragend はドラッグを終了します) =====ドラッグは 1 回だけ実行されます'); //透明度をリセットしますevent.target.style.opacity = ; false); div ID=ドラッグ可能raggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> これはドラッグ可能な DIV です </div> </div> <div class=dropzone></div> <div class=ドロップゾーン ></div> <div class=dropzone></div></body></html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。