ホームページ > 記事 > ウェブフロントエンド > html5でのドラッグ&ドロップのサンプルコードを詳しく紹介
1) ソースプロジェクトを作成します
1.1) ドラッグ可能な属性の値:
true - この要素はドラッグできます。
false - この要素はドラッグできません。 オート- ブラウザは要素をドラッグできるかどうかを決定できます。
1.2) ドラッグされた要素の イベント:
要素のドラッグが開始されるときにトリガーされます。要素がドラッグされます。
ドラッグend—ドラッグ操作が完了するとトリガーされます
2) リリースエリアを作成します
ドラッグ操作が完了するとトリガーされます。ドラッグされた要素がリリース領域によって占有されている画面スペースに入ったとき;
ドラッグオーバー - ドラッグされた要素がリリース領域内で移動したときにトリガーされます。
drop - ドラッグされた要素がリリース領域にドロップされるとトリガーされます。
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style> #src > * {float:left;} #src > img {border: thin solid black; padding: 2px; margin:4px;} #target {border: thin solid black; margin:4px;} #target { height: 81px; width: 81px; text-align: center; display: table;} #target > p {display: table-cell; vertical-align: middle;} img.dragged {background-color: lightgrey;} </style> </head> <body> <p id="src"> <img draggable="true" id="banana" src="banana100.png" alt="banana"/> <img draggable="true" id="apple" src="apple100.png" alt="apple"/> <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/> <p id="target"> <p id="msg">Drop Here</p> </p> </p> <script> var src = document.getElementById("src"); var target = document.getElementById("target"); var msg = document.getElementById("msg"); var draggedID; target.ondragenter = handleDrag; target.ondragover = handleDrag; function handleDrag(e) { e.preventDefault(); } target.ondrop = function(e) { var newElem = document.getElementById(draggedID).cloneNode(false); target.innerHTML = ""; target.appendChild(newElem); e.preventDefault(); } src.ondragstart = function(e) { draggedID = e.target.id; e.target.classList.add("dragged"); } src.ondragend = function(e) { var elems = document.querySelectorAll(".dragged"); for (var i = 0; i < elems.length; i++) { elems[i].classList.remove("dragged"); } } </script> </body> </html>3) DataTransfer を使用します
Object
3.1) によってトリガーされるイベントと同時に送出されるオブジェクトドラッグ アンド ドロップ操作は、MouseEvent から派生した DragEvent です。
DragEvent オブジェクトによって定義される追加のプロパティ:
dataTransfer - リリース領域にデータを転送するために使用されるオブジェクト (DataTransfer) を返します。
3.2) DataTransfer オブジェクトによって定義されるプロパティ:
タイプ—データの形式を返します。
getData(0313a12b65aa20a048ec62b8cf470fd2)— 指定された形式でデータを返します。
setData(0313a12b65aa20a048ec62b8cf470fd2,
Data(0313a12b65aa20a048ec62b8cf470fd2) - 指定された形式でデータを削除します。 File オブジェクトによって定義されるプロパティ name - ファイル名を取得します type - MIME で表されるファイル タイプを取得します。 type; size—ファイルサイズを取得します (バイト単位)。 以上がhtml5でのドラッグ&ドロップのサンプルコードを詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。