拖放（Drag 和 Drop）是 HTML5 標(biāo)準(zhǔn)的組成部分。拖放顧名思義就是把一個(gè)對象抓取放到另一個(gè)位置带膜。在HTML5中渐逃，任何元素都支持拖放。
-
瀏覽器支持情況
firefox忠聚，opera12，Chrome唱捣， Safari5两蟀，Microsof Edge，IE9（IE6~8是有拖放的api的震缭，但是沒有dataTrasfer對象）赂毯。
-
開啟draggable屬性
要想拖動網(wǎng)頁中的一個(gè)元素，我們必須給這個(gè)元素設(shè)置draggable的屬性為true拣宰。
<div draggable="true"></div>
大部分瀏覽器的圖片和鏈接是默認(rèn)可以拖動的党涕。
-
拖動過程中觸發(fā)的事件
在拖動的過程中會觸發(fā)一系列事件。
drag ------ 被拖動元素在拖動的過程中會持續(xù)觸發(fā)巡社，給拖動元素設(shè)置該事件膛堤。
dragstart ------ 被拖動元素在拖動開始時(shí)會觸發(fā)，給拖動元素設(shè)置該事件晌该。
dragend ------ 被拖動元素在拖動結(jié)束時(shí)會觸發(fā)肥荔，給拖動元素設(shè)置該事件绿渣。
dragenter ------ 進(jìn)入目標(biāo)區(qū)域時(shí)會觸發(fā)，給目標(biāo)區(qū)域設(shè)置該事件燕耿。
dragleave ------ 離開目標(biāo)區(qū)域時(shí)會觸發(fā)中符，給目標(biāo)區(qū)域設(shè)置該事件。
dragover ------ 進(jìn)入目標(biāo)區(qū)域時(shí)會持續(xù)觸發(fā)誉帅，給目標(biāo)區(qū)域設(shè)置該事件淀散。
drop ------ 結(jié)束拖放，也就是松開鼠標(biāo)時(shí)觸發(fā)蚜锨，目標(biāo)區(qū)域或者拖動元素都可設(shè)置档插。
-
簡單的例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box{
height:140px;
width:140px;
border:1px solid black;
padding:25px;
margin-bottom:20px;
}
.move{
height:120px;
width:120px;
border:1px solid green;
background:green;
}
</style>
<script>
function moveover(e){//拖動事件以參數(shù)形式傳進(jìn)函數(shù)內(nèi)部
e.preventDefault();//去除瀏覽器默認(rèn)效果
}
function drop(e){
e.preventDefault();
var data=e.dataTransfer.getData("Text");//取到數(shù)據(jù)
e.target.appendChild(document.getElementsByClassName(data)[0]);
}
function movestart(e){
e.dataTransfer.setData("Text",e.target.className);//
在dataTrasfer對象上存儲數(shù)據(jù)
}
</script>
</head>
<body>
//綁定事件形式的拖放操作
<div class="box" ondragover="moveover(event)" ondrop="drop(event)"></div>
<div class="move" draggable="true" ondragstart="movestart(event)"></div>
</body>
</html>
圖.jpg
-
dataTransfer對象
拖動事件有一個(gè)dataTransfer屬性，它本身指向一個(gè)對象踏志，包含了與拖動相關(guān)的各種信息阀捅。
// dataTransfer的屬性
dropEffect ------ 拖放的操作類型，決定了瀏覽器如何顯示鼠標(biāo)形狀针余，可能的值為copy、move凄诞、link和none圆雁。
effectAllowed ------ 指定所允許的操作，可能的值為copy帆谍、move伪朽、link、copyLink汛蝙、copyMove烈涮、linkMove、all窖剑、none和uninitialized（默認(rèn)值坚洽，等同于all，即允許一切操作）西土。
files ------ 包含一個(gè)FileList對象讶舰，表示拖放所涉及的文件，主要用于處理從文件系統(tǒng)拖入瀏覽器的文件需了。
types ------ 儲存在DataTransfer對象的數(shù)據(jù)的類型跳昼。
// dataTransfer的方法
setData(format, data) ------ 在dataTransfer對象上儲存數(shù)據(jù)。第一個(gè)參數(shù)format用來指定儲存的數(shù)據(jù)類型肋乍，比如text鹅颊、url、text/html等墓造。
getData(format) ------ 從dataTransfer對象取出數(shù)據(jù)堪伍。
clearData(format) ------ 清除dataTransfer對象所儲存的數(shù)據(jù)锚烦。如果指定了format參數(shù)，則只清除該格式的數(shù)據(jù)杠娱，否則清除所有數(shù)據(jù)挽牢。
setDragImage(imgElement, x, y) ------ 指定拖動過程中顯示的圖像。默認(rèn)情況下摊求，許多瀏覽器顯示一個(gè)被拖動元素的半透明版本禽拔。參數(shù)imgElement必須是一個(gè)圖像元素，而不是指向圖像的路徑室叉，參數(shù)x和y表示圖像相對于鼠標(biāo)的位置睹栖。
dataTransfer對象允許在其上存儲數(shù)據(jù)，這使得在被拖動元素與目標(biāo)元素之間傳送信息成為可能茧痕。
-
實(shí)例：拖動頁面元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.divBox{
width:200px;
border:1px dotted black;
margin:20px;
padding:10px;
}
.divBox .move{
height:40px;
width:150px;
border:1px solid green;
background:green;
margin:0px auto;
}
</style>
</head>
<body>
<div class="divBox">
<div class="move" draggable="true" ></div>
</div>
<div class="divBox"></div>
<div class="divBox"></div>
<div class="divBox"></div>
<script>
var moveBox = document.querySelector(".move");//選取第一個(gè)class為move的節(jié)點(diǎn)
var boxs = document.querySelectorAll(".divBox");//選取所有class為divBox的節(jié)點(diǎn)
moveBox.addEventListener("dragstart",function(e){//綁定一個(gè)監(jiān)聽事件野来，當(dāng)dragstart事件發(fā)生時(shí)，調(diào)用回調(diào)函數(shù)
e.dataTransfer.setData("text",e.target.className);//類名
});
moveBox.addEventListener("dragend",function(e){
});
for(var i = 0;i < boxs.length;i++){//給每個(gè)div綁定事件
boxs[i].addEventListener('dragover', function(e) {
e.preventDefault();//避免瀏覽器的默認(rèn)值
e.dataTransfer.dropEffect = 'move';
this.style.border = '1px solid red';
this.style.height = '42px';
return false;
});
boxs[i].addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation();
this.style.border = '1px dotted black';
this.style.height = '';
var data = e.dataTransfer.getData('text');//取得數(shù)據(jù)
this.appendChild(document.getElementsByClassName(data)[0]);//把拖動元素放到目標(biāo)div中
});
boxs[i].addEventListener('dragenter', function(e) {
e.preventDefault();
});
boxs[i].addEventListener('dragleave', function(e) {
e.preventDefault();
this.style.border = '1px dotted black';
this.style.height = '';
});
}
</script>
</body>
</html>
圖2.jpg
-
拖放的其他用途
拖放操作給交互本來就很少的html增加了很多樂趣踪旷，通過H5的拖放操作曼氛，我們還可以進(jìn)行板塊的復(fù)制，交換等令野，本人技術(shù)能力有限舀患，等研究明白了一定補(bǔ)上。
-
資料與文獻(xiàn)
此文資料部分參考自:
草根程序員
W3C
如想更深入了解H5的拖放气破，請參考以上文獻(xiàn)聊浅。
作者：jingks
此為原創(chuàng)文章，請勿用在商業(yè)用途现使，轉(zhuǎn)載請標(biāo)明作者低匙。
