HTML5 のドラッグ アンド ドロップ操作 HTML5 は Web ページ要素のドラッグ アンド ドロップ操作を実装します_html5 チュートリアル スキル

HTML5 が登場する前は、Web ページ要素のドラッグ アンド ドロップ操作を実装するには、mousedown、mousemove、mouseup などの API に依存する必要がありました。これらの API は、HTML5 で導入された大量の API によって直接実装されました。ドラッグ アンド ドロップ操作をサポートし、Web ページ要素を大幅に簡素化しました。ドラッグ アンド ドロップ操作をプログラムするのは困難であり、これらの API はブラウザ内での要素のドラッグ アンド ドロップをサポートするだけでなく、データの相互ドラッグもサポートします。ブラウザと他のアプリケーションの間で。

この記事では、簡単な例を使用して、HTML5 でのドラッグ アンド ドロップ API の使用方法を示します。

シーン:

下の図に示すように、次のことを実現したいと考えています。

ドラッグ アンド ドロップによって、左側の [アルバム] エリアから右側の [ゴミ箱] エリアに写真をドラッグします。[ヒント] セクションで、ドラッグ アンド ドロップが必要であることが通知されます。操作は現在進行中です。

実装方法:

上記のインターフェースの HTML コードは、次のように比較的単純です。

コードをコピーします

コードは次のとおりです。次のように:

注意: 写真をゴミ箱に直接ドラッグできます

アルバム

ゴミ箱< ;/h2>

注:ドラッグ アンド ドロップ操作を実装したい場合は、ドラッグ アンド ドロップする要素に draggable="true" 属性を追加する必要があります。 次に、次の JS コードを onload イベントに追加します。コメントは非常に詳細なので、個別に説明しません。

コードをコピーしますコードは次のとおりです:

<script><br> function init(){<br> var info = document.getElementById("info");<br> //ドラッグ アンド ドロップされた要素を取得します。この例では、フォトアルバムは DIV<br> var src = document.getElementById("album");<br> //ドラッグアンドドロップ操作を開始<br> src.ondragstart = function (e) {<br> //ID を取得ドラッグ アンド ドロップされた写真 <br> varragImgId = e.target.id;<br> //ドラッグされた要素を取得します<br> varragImg = document.getElementById(dragImgId);<br> //ドラッグ アンド ドロップ操作が終了します<br>ragImg.ondragend = function(e){<br> //リマインダー情報を復元<br> info.innerHTML="<h2>注意喚起: 写真をゴミ箱に直接ドラッグできます</h2>"; <br> }; <br> e.dataTransfer.setData("text",dragImgId);<br> };<br> //ドラッグアンドドロップ処理中 <br> src.ondrag = function(e){ <br> info.innerHTML=" <h2>--写真はドラッグ中です--</h2>";<br> }<br> //ドラッグ アンド ドロップのターゲット要素を取得します<br> var target = document. getElementById("trash"); <br> //デフォルトの処理をオフにする; <br> target.ondragenter = function(e){<br> e.preventDefault();<br> }<br> target.ondragover = function (e){<br> e .preventDefault(); <br> }<br> //ターゲット要素に何かがドラッグ アンド ドロップされます <br> target.ondrop = function (e) {<br> varraggedID = e .dataTransfer.getData("text"); <br> //アルバム内の DOM オブジェクトを取得します <br> var oldElem = document.getElementById(draggedID);<br> //アルバム DIV から写真のノードを削除します<br> oldElem.parentNode.removeChild(oldElem); <br> // ドラッグした写真 DOM ノードをゴミ箱 DIV に追加します。 <br> target.appendChild(oldElem);<br> info.innerHTML="<h2&gt ;暖かいヒント: 写真をゴミ箱に直接ドラッグできます</h2>";<br> e.preventDefault();<br> }<br> }<br> </script>

効果を達成するには:

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。