ドラッグ アンド ドロップ API は HTML5 の新機能であり、他の新機能と比較すると、その重要性は 60%、実際の開発では使用率の 30% を占めます。学習要件は、これを習得するだけで十分です。
2. ドラッグアンドリリースとは何ですか?ドラッグ: ドラッグ
リリース: ドロップ
ドラッグとは、マウスがソース オブジェクトをクリックし、一度放した後は放さずにオブジェクトを移動し続けることを意味します。
3. ソース オブジェクトとターゲット オブジェクトとは何ですか?ソース オブジェクト: マウスでクリックしたものを指します。画像、DIV、テキストなどが考えられます。
ターゲット オブジェクト: ソース オブジェクトをドラッグして領域に移動することを指します。ソース オブジェクトがこの領域に入り、この領域の上にカーソルを置き (放さずに)、ここでソース オブジェクトを放します (すでに放しています)。ホバリング後にエリアを離れることもできます。
4. ドラッグ＆ドロップAPIの関連機能ソース オブジェクトとターゲット オブジェクトが何であるかを説明した後、フロント エンドのドラッグ アンド ドロップ API に戻りましょう。上記の操作から、いくつかの関数を派生できます。
ドラッグされたソース オブジェクトによってトリガーできるイベント:
(1)ondragstart: ソースオブジェクトのドラッグを開始します。
(2)ondrag: ソース オブジェクトがドラッグされています (マウスは移動している場合と移動していない場合があります)。
(3)ondragend: ソースオブジェクトを最後までドラッグします
ソース オブジェクトをドラッグして、上のターゲット オブジェクトによってトリガーできるイベントを入力します。
(1)ondragenter: ターゲット オブジェクトをソース オブジェクトにドラッグします。
(2) ondragover: ターゲット オブジェクトがソース オブジェクトによってドラッグされ、その上に移動します。
(3)ondragleave: ソース オブジェクトがターゲット オブジェクトからドラッグされます。
(4)ondrop: ソースオブジェクトをドラッグし、ターゲットオブジェクトの上で放す/放します
ドラッグアンドドロップ API には合計 7 つの関数があります。 ！
5. ドラッグされたソースオブジェクトイベントとターゲットオブジェクトイベントの間でデータを転送する方法HTML5 は、すべてのドラッグ関連イベントに新しい属性を提供します。
e.dataTransfer { } //数据传递对象
機能: ソース オブジェクトとターゲット オブジェクトのイベント間でデータを渡すために使用されます。
ソース オブジェクトのイベント ハンドラーにデータを保存します。
e.dataTransfer.setData( k, v ); //kv必须都是string类型
ターゲット オブジェクトのイベント ハンドラーでデータを読み取ります。
var v = e.dataTransfer.getData(k);
例 1: マウスのドラッグに応じて移動できる小型飛行機を実装する
ヒント: 飛行機は絶対に位置決めする必要があります。 ondragイベントでマウスの座標値を取得！ ！ ！
コードは次のとおりです。
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body{ 位置: 相対; </style> </head> <body> <h3>マウスのドラッグに応じて移動する小さな平面</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('イベント ソース p3 がドラッグを開始します'); // ドラッグ直後のマウスのオフセットを記録します offsetX= e.offsetX= e. .ondrag=function(e){ console.log('イベント ソース p3 がドラッグされています'); var x= e.pageX; console.log(x+'-'+y); //ドラッグイベントの最後の瞬間、マウスの座標が読み取れず、pageXとpageYが両方とも0になります if(x==0 && y==0) ){ return; // ドラッグの最後の瞬間に X と Y が両方とも 0 になる状況は処理しません。} x-=offsetX=x+'px';トップ=y+'px'; p3.ondragend=function(){ console.log('ソース オブジェクト p3 ドラッグ終了') } </script> </body> </html>効果は次のとおりです。
例 2:
コンピューター内のゴミ箱の効果をシミュレートします。合計 3 つの小さなプレーンがゴミ箱の上部にドラッグされた後、その小さなプレーンが DOM ツリーから削除されます。
ヒント: 削除するには、DOM 子ノードから要素を削除する必要があり、ondragover のデフォルトの動作を防ぐ必要があります。 ！ソース オブジェクトとターゲット オブジェクト間のデータ転送を使用して、小型航空機の ID 値を記録します。 ！ ！
重要な情報:
ondragover にはデフォルトの動作があります。 ！ ！つまり、ondragover がトリガーされると、ondrop は失敗します。 ！ ！ ！これはブラウザのバージョンの問題である可能性があり、ブラウザが今後継続的に更新される場合にのみ解決される可能性があります。 ！
それを止めるにはどうすればよいでしょうか？
ondragover= function(e){ //ソース オブジェクトがターゲット オブジェクトの上に移動しているとき e.preventDefault(); //ドロップがトリガーされるようにデフォルトの動作を防止します...}ondrop= function(e){ //ソース オブジェクトがターゲット オブジェクトで解放されます...}コードは次のとおりです。
<!DOCTYPE html> <html> <head lang=ja> <meta charset=UTF-8> <title></title> <style> body { text-align: center } #trash { opacity: .2; : 15px; } </style> </head> <body> <h3>プレーンをゴミ箱にドラッグした後、DOM ツリーから子要素を削除します</h3> <img id=trash src=img/trash_full.png> <hr/> <img id=p3 class=src src=img/p3.png> <img id=p4 class=src src=img/p4.png> <img id=p5 クラス=src src=img/p5.png> <script> //ソース オブジェクトのイベント監視を追加 - どのソース オブジェクト var がドラッグされたかを記録しますsrcList = document.querySelectorAll('.src'); //すべての img 要素を検索 for(var i=0; i<srcList.length; i++){ //img 要素を走査する var p = srcList[i]; = function(e){ //ソース オブジェクトのドラッグを開始します e.dataTransfer.setData('PlaneID',this.id) //データを保存します -- img 要素の ID } p.ondrag = function(){} p.ondragend = function(){} } //ターゲット オブジェクトをリッスンするイベントを追加します - ドラッグされたソース オブジェクトを削除しますrash.ondragenter = function(){ //ソース オブジェクトがターゲットに入りますobject console .log('drag enter');rash.style.opacity = 1; //透明度を 1 に変更します }trash.ondragleave= function(){ //ソース オブジェクトがターゲット オブジェクトを離れた後、console.log('ドラッグしてそのままにしておきます') ; rash.style.opacity = .2; //透明度を 0.2 に変更します }trash.ondragover= function(e){ //ソース オブジェクトがターゲット オブジェクトの上に移動します e.preventDefault(); //デフォルトの動作を防止します。 droptriggerable}trash.ondrop= function(e){ //ソースオブジェクトはターゲットオブジェクトで解放されます console.log('drop'); //透明度を 0.2 に変更します//ドラッグされたソース オブジェクトを削除します var id = e.dataTransfer.getData('PlaneID'); //データを取得します --id 値 var p = document.getElementById(id); //id 値 p に基づいて関連要素を検索します。 parentNode.removeChild(p); //親要素から子ノードを削除} </script> </body> </html>効果は次のとおりです。
小さな飛行機をゴミ箱にドラッグして削除した後、次のようにします。
写真の通り、元々は小型飛行機が3機ありましたが、現在は2機となっております！ ！ ！
6. ドラッグ＆ドロップAPIに関する補足知識！ ！ （重要、面接中に聞かれる場合があります!!）面接の質問:
クライアント（コンピュータ）からの画像をWebページに表示するにはどうすればよいですか？
クライアントの Web ページをドラッグして、サーバー側でダウンロードしたページに表示するにはどうすればよいですか?
これら 2 つの質問は何を意味しますか?
通常、ダウンロード操作を実行するには、コンピュータからブラウザに画像をドラッグ アンド ドロップします。 ！ ！ H5 以前の標準によれば、画像をブラウザに直接ドラッグ アンド ドロップして表示することは不可能です。 ！しかし、H5 の新機能が登場してから、この機能を完全に実現するドラッグ アンド ドロップ API の機能が追加されました。 ！ ！
適用機会:
とあるWebサイトにアバターとして写真をアップロード
写真をアップロード...
HTML5 の新しいファイル操作オブジェクト:
File: ファイルオブジェクトを表します
FileList: 配列のようなファイル リスト オブジェクトを表します。
FileReader: ファイルからデータを読み取るために使用されます
FileWriter: データをファイルに書き込むために使用されます
関連機能:
div.ondrop = function(e){var f = e.dataTransfer.files[0]; //ドラッグアンドドロップされたファイルを検索 var fr = new FileReader() //ファイルリーダーを作成します fr.readAsURLData(f); //ファイルの内容を読み込み fr.onload = function(){ //読み込み完了 img.src = fr.result; //読み込んだデータを使用する }コードは次のとおりです。
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { border: 1px Solid #aaa; ボーダー半径: 3 ピクセル; マージン: 10 ピクセル; </style> </head> <body> <h1>ドラッグ アンド ドロップ API に関する幅広い知識</h1> <h3>写真を下のボックス領域にドラッグしてください</h3> <div id=container></ div > <script> //ドキュメントのドロップ イベントをリッスンします - デフォルトの動作をキャンセルします: 新しいウィンドウで画像を開きます document.ondragover = function(e){ e.preventDefault(); //ドロップ イベントのトリガーを有効にします。ドキュメント.ondrop = function(e){ e.preventDefault(); //画像が新しいウィンドウで開かれないようにします。そうしないと、ダウンロード操作が引き続き実行されます。 ！ ！ } // div#container のドロップイベントをリッスンし、リリースされた画像データを読み込んで表示します。container.ondragover = function(e){ e.preventDefault() }container.ondrop = function(e){ console; .log ('クライアントが画像をドラッグして放しました...') //現在のターゲット オブジェクトは、ドラッグ アンド ドロップのソース オブジェクトに保存されているデータを読み取ります。 //console.log(e.dataTransfer); //問題を表示 //console.log(e.dataTransfer.files.length) //ドラッグされた画像の数 var f0 = e.dataTransfer.files[0] //console.log(f0); /File object File //ファイル オブジェクトからデータを読み取ります。 var fr = new FileReader() //fr.readAsText(f0); //ファイルからテキスト文字列を読み取ります。 // ファイルから URL データを読み取ります fr.onload = function(){ console.log('ファイルの読み取りが完了しました') console.log(fr.result); var img = new Image(); ; //URL データcontainer.appendChild(img) } } </script> </body> </html></span>効果は次のとおりです。
要約する上記は、編集者によって紹介された HTML5 ドラッグ アンド ドロップ API の典型的な例の詳細な説明です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。 。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！