ホームページ > 記事 > ウェブフロントエンド > HTML5 ドラッグ アンド ドロップの学習と完全なサンプル コード
HTML5 ドラッグ アンド ドロップの学習と完全なサンプル コード
- PHPzオリジナル
- 2017-04-23 11:55:061369ブラウズ
この記事は HTML5 のドラッグ アンド ドロップを学習し、サンプル コードを完成させます。これが H5 初心者に役立つことを願っています。
1）ソースプロジェクトを作成する1.1）ドラッグ可能な属性の値：この要素をドラッグすることはできませんauto - ブラウザーは要素をドラッグできるかどうかを独自に決定できます。
1.2) ドラッグされた要素のイベント:
Drag - 要素のドラッグが開始されると繰り返しトリガーされます。要素がドラッグされます。
ドラッグ操作が完了するとトリガーされます。
2) リリースエリアを作成します
2.1) リリースエリアイベント:
ドラッグされた要素がリリースエリアに入ったときにトリガーされます。画面スペースが占有されています。
ドラッグオーバー - ドラッグされた要素がリリース領域内に移動するとトリガーされます。
ドラッグされた要素が配置されずにリリース領域を離れるとトリガーされます。ドラッグされた要素がリリース領域にドロップされたとき。
<!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 オブジェクトを使用します
3.1) ドラッグ アンド ドロップ操作によってトリガーされるイベントと同時に送出されるオブジェクトは、MouseEvent から派生した DragEvent です。DragEvent オブジェクトによって定義される追加のプロパティ:
dataTransfer - リリース領域へのデータ転送に使用されるオブジェクト (DataTransfer) を返します。
3.2)
DataTransfer オブジェクトによって定義されるプロパティ:
タイプ - 返されるデータの形式。getData(0313a12b65aa20a048ec62b8cf470fd2)—指定された形式でデータを返します。
setData(0313a12b65aa20a048ec62b8cf470fd2,1d029f6197b5a3eb8a3fdf0a088ddf55)—指定された形式でデータを設定します。
clearData(0313a12b65aa20a048ec62b8cf470fd2) - 指定された形式のデータを削除します。
files - ドラッグされたファイルのリストを返します。
<!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");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function(e) {
var droppedID = e.dataTransfer.getData("Text");
var newElem = document.getElementById(droppedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = function(e) {
e.dataTransfer.setData("Text", 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.3) ファイルをドラッグアンドドロップします:
File オブジェクトによって定義されるプロパティ
name - ファイル名を取得します。
type—ファイルの種類を取得します。 MIME タイプで表されます。
size - ファイル サイズを取得します (バイト単位で計算されます)。以上がHTML5 ドラッグ アンド ドロップの学習と完全なサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。