ホームページ > 記事 > ウェブフロントエンド > HTML5ドラッグ&ドロップ効果の実装コード
ドラッグ アンド ドロップ
ドラッグ アンド ドロップは、オブジェクトを取得し、後で別の場所にドラッグする一般的な機能です。
HTML5 ではドラッグ アンド ドロップが標準の一部であり、あらゆる要素をドラッグ アンド ドロップできます。
Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari はドラッグをサポートしています。
注: Safari 5.1.2 はドラッグをサポートしていません
例:
<!DOCTYPE html> <html> <head> <title>拖放</title> <style type="text/css"> #p1{width:360px;height:220px;padding:20px;border:1px solid black;} </style> <script> 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> <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p> <br /> <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)" width="300px" height="180px" /> </body> </html>
まず、要素をドラッグ可能にするために、draggable 属性 を true に設定します:
次に、要素をドラッグしたときの動作を指定します。
上記の例では、ondragstart 属性 は、ドラッグされるデータを指定する関数、drag(event) を呼び出します。
dataTransfer.setData() メソッドドラッグされたデータのデータ型と値を設定します:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
この例では、データ型は「Text」で、値はドラッグ可能な要素の ID ("ドラッグ 1" )。
ondragover イベント は、ドラッグされたデータを配置する場所を指定します。
デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。
これは、ondragover イベントのevent.preventDefault()メソッドを呼び出すことで行われます:event.preventDefault()
ドラッグされたデータがドロップされると、ドロップイベントが発生します。
上記の例では、ondrop 属性は関数 drop(event) を呼び出します。
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
コードの説明:
preventDefault() を呼び出して、ブラウザのデフォルトのデータ処理を回避します (drop デフォルトイベントの動作は、リンクとして開くことです)
dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します。このメソッドは、setData() メソッドと同じ型のデータ セットを返します。 ドラッグされたデータはドラッグされた要素のIDです(「drag1」)
ドラッグされた要素を配置された要素(ターゲット要素)に追加します
前後にドラッグします:
2つの間を前後にドラッグしたい場合上記のコードを少し変更するだけです:
<body> <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)" width="300px" height="180px" /></p> <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p> </body>
次に、スタイルに #p2 を追加します:
<style type="text/css"> #p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;} </style>
この方法で実現できます。行ったり来たり。
上記は HTML5 ドラッグ アンド ドロップ効果の実装コードの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。