HTML5 のドラッグ アンド ドロップ
HTML5 ドラッグ アンド ドロップ
ドラッグ アンド ドロップ
ドラッグ アンド ドロップは、オブジェクトを取得し、後で別の場所にドラッグする一般的な機能です。
HTML5 ではドラッグ アンド ドロップが標準の一部であり、任意の要素をドラッグ アンド ドロップできます
関連例:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html5 drag & drop 拖拽与拖放测试</title>
<style>
body{font-size:84%;}
.dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
.dragbox{width:500px; padding-left:20px; float:left;}
.draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move;}
.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
.dragremind{padding-top:2em; clear:both;}
</style>
</head>
<body>
<div class="dustbin"><br>垃<br>圾<br>箱</div>
<div class="dragbox">
<div class="draglist" title="拖拽我" draggable="true">列表1</div>
<div class="draglist" title="拖拽我" draggable="true">列表2</div>
<div class="draglist" title="拖拽我" draggable="true">列表3</div>
<div class="draglist" title="拖拽我" draggable="true">列表4</div>
<div class="draglist" title="拖拽我" draggable="true">列表5</div>
<div class="draglist" title="拖拽我" draggable="true">列表6</div>
</div>
<div class="dragremind"></div>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script>
var $ = function(selector) {
if (!selector) { return []; }
var arrEle = [];
if (document.querySelectorAll) {
arrEle = document.querySelectorAll(selector);
} else {
var oAll = document.getElementsByTagName("div"), lAll = oAll.length;
if (lAll) {
var i = 0;
for (i; i<lAll; i+=1) {
if (/^\./.test(selector)) {
if (oAll[i].className === selector.replace(".", "")) {
arrEle.push(oAll[i]);
}
} else if(/^#/.test(selector)) {
if (oAll[i].id === selector.replace("#", "")) {
arrEle.push(oAll[i]);
}
}
}
}
}
return arrEle;
};
var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
eleDrags[i].onselectstart = function() {
return false;
};
eleDrags[i].ondragstart = function(ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
ev.dataTransfer.setDragImage(ev.target, 0, 0);
eleDrag = ev.target;
return true;
};
eleDrags[i].ondragend = function(ev) {
ev.dataTransfer.clearData("text");
eleDrag = null;
return false
};
}
eleDustbin.ondragover = function(ev) {
ev.preventDefault();
return true;
};
eleDustbin.ondragenter = function(ev) {
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) {
if (eleDrag) {
eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "#000000";
return false;
};
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11205167-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>要素をドラッグ可能に設定します
まず、要素をドラッグ可能にするには。 、ドラッグ可能な属性を設定します true に設定します:
<imgraggable="true">
何をドラッグするか - ondragstart と setData()
次に、要素がドラッグされたときに何が起こるかを指定します。
上記の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(event) を呼び出します。
dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}この例では、データ型は「Text」で、値はドラッグ可能な要素 (「drag1」) の ID です。
配置場所 - ondragover
ondragover イベントは、ドラッグされたデータを配置する場所を指定します。
デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。
これは、ondragover イベントのevent.preventDefault() メソッドを呼び出すことで行われます。
event.preventDefault()
- ondrop
ドラッグされたデータをドロップすると、drop イベントが発生します。
上記の例では、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」)
配置された要素(ターゲット要素)にドラッグされた要素を追加します
関連するナレッジポイントの概要:
DataTransferオブジェクト: ドラッグオブジェクトの転送に使用されます通常、使用されるメディアは Event.dataTransfer です。
draggable 属性: label 要素は、draggable=true で設定する必要があります。そうでない場合は、効果がありません。例:
<div title="Drag me"raggable="true">List 1</div>
ondragstart イベント: ドラッグ要素のドラッグが開始されたときにトリガーされるイベント。
ondragenter イベント: ドラッグされた要素がターゲット要素に入ったときにトリガーされるイベント。ターゲット要素の ondragover イベント: ドラッグされた要素がターゲット要素上で移動するとトリガーされるイベント。このイベントはターゲット要素に作用します。
ondrop イベント: ドラッグされた要素がターゲット要素上にあり、マウスが放されたときにトリガーされるイベント。同時に、このイベントはターゲット要素に作用します
ondragend イベント: ドラッグが完了したときにトリガーされるイベント、このイベントはドラッグされた要素に作用します
Event.preventDefault() メソッド: 一部のデフォルトのイベント メソッドの実行を防止します。 PreventDefault() は ondragover で実行する必要があります。そうしないと、ondrop イベントはトリガーされません。さらに、他のアプリケーションやファイル、特に画像から何かをドラッグした場合、デフォルトのアクションでは画像または関連情報が表示され、実際にはドロップは実行されません。現時点では、ドキュメントの ondragover イベントを使用してドキュメントを直接強制終了する必要があります。
Event.effectAllowed 属性: ドラッグ効果です。
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
