HTML5 拖放
HTML5 拖曳
拖曳
拖曳是一種常見(jiàn)的特性，即抓取物件以後拖曳到另一個(gè)位置。
在HTML5 中，拖曳是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖曳。
#相關(guān)實(shí)例：
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html5 drag & drop 拖拽與拖放測(cè)試</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>被扔進(jìn)了垃圾箱';
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>設(shè)定元素為可拖放
首先，為了讓元素可拖曳，把draggable 屬性設(shè)為true ：
<img draggable="true">
#拖曳什麼- ondragstart 和setData()
然後，規(guī)定當(dāng)元素被拖曳時(shí)，會(huì)發(fā)生什麼事。
在上面的範(fàn)例中，ondragstart 屬性呼叫了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖曳的資料。
dataTransfer.setData() 方法設(shè)定被拖曳資料的資料型別和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}在這個(gè)範(fàn)例中，資料型別是"Text"，值是可拖曳元素的id ( "drag1")。
放到何處 - ondragover
ondragover 事件規(guī)定在何處放置被拖曳的資料。
預(yù)設(shè)地，無(wú)法將資料/元素放置到其他元素中。如果需要設(shè)定允許放置，我們必須阻止對(duì)元素的預(yù)設(shè)處理方式。
這要透過(guò)呼叫ondragover 事件的event.preventDefault() 方法：
event.preventDefault()
來(lái)放置- ondrop
當(dāng)放置被拖曳資料時(shí)，會(huì)發(fā)生drop 事件。
在上面的例子中，ondrop 屬性呼叫了一個(gè)函數(shù)，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}程式碼解釋?zhuān)?/p>
呼叫preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的預(yù)設(shè)處理（drop 事件的預(yù)設(shè)行為是以連結(jié)形式開(kāi)啟）
透過(guò)dataTransfer.getData("Text") 方法獲得被拖曳的資料。此方法將傳回在 setData() 方法中設(shè)定為相同類(lèi)型的任何資料。
被拖曳資料是被拖曳元素的id ("drag1")
把被拖曳元素追加到放置元素（目標(biāo)元素）中
相關(guān)知識(shí)點(diǎn)總結(jié)：
DataTransfer?物件：退化物件用來(lái)傳遞的媒介，使用一般為Event.dataTransfer。
draggable?屬性：就是標(biāo)籤元素要設(shè)定draggable=true，否則不會(huì)有效果，例如：
<div title="拖曳我" draggable="true">列表1</div>
ondragstart?事件：當(dāng)拖曳元素開(kāi)始拖曳的時(shí)候觸發(fā)的事件，此事件作用在被拖曳元素上
ondragenter?事件：當(dāng)拖曳元素進(jìn)入目標(biāo)元素的時(shí)候觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondragover?事件：拖曳元素在目標(biāo)元素上移動(dòng)的時(shí)候觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondrop事件：被拖曳的元素在目標(biāo)元素上同時(shí)滑鼠放開(kāi)觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondragend?事件：當(dāng)拖曳完成後觸發(fā)的事件，此事件作用在被拖曳元素上
Event.preventDefault()?方法：阻止預(yù)設(shè)的些事件方法等執(zhí)行。 ondragover中一定要執(zhí)行preventDefault()，否則ondrop事件不會(huì)被觸發(fā)。另外，如果是從其他應(yīng)用軟體或檔案中拖東西進(jìn)來(lái)，尤其是圖片的時(shí)候，預(yù)設(shè)的動(dòng)作是顯示這個(gè)圖片或是相關(guān)訊息，並不是真的執(zhí)行drop。此時(shí)需要用用document的ondragover事件把它直接幹掉。
Event.effectAllowed?屬性：就是拖曳的效果。
