HTML5拖拽API經(jīng)典實(shí)例詳解
我要評(píng)論一、關(guān)于拖拽API
拖拽API是HTML5的新特性，相對(duì)于其他新特性來(lái)說(shuō)，重要程度占到6成，實(shí)際開(kāi)發(fā)中使用比例占到3成，學(xué)習(xí)要求個(gè)人認(rèn)為是達(dá)到掌握即可的程度。
二、什么是拖拽和釋放？
拖拽：Drag
釋放：Drop
拖拽指的是鼠標(biāo)點(diǎn)擊源對(duì)象后一直移動(dòng)對(duì)象不松手，一但松手即釋放了
三、什么是源對(duì)象和目標(biāo)對(duì)象？
源對(duì)象：指的是我們鼠標(biāo)點(diǎn)擊的一個(gè)事物，這里可以是一張圖片，一個(gè)DIV，一段文本等等。
目標(biāo)對(duì)象：指的是我們拖動(dòng)源對(duì)象后移動(dòng)到一塊區(qū)域，源對(duì)象可以進(jìn)入這個(gè)區(qū)域，可以在這個(gè)區(qū)域上方懸停(未松手)，可以釋松手釋放將源對(duì)象放置此處(已松手)，也可以懸停后離開(kāi)該區(qū)域。
四、拖拽API的相關(guān)函數(shù)
解釋了什么是源對(duì)象和目標(biāo)對(duì)象后，回歸前端中的拖拽API，由上面的操作我們可以得出幾個(gè)函數(shù)
被拖動(dòng)的源對(duì)象可以觸發(fā)的事件：
(1)ondragstart：源對(duì)象開(kāi)始被拖動(dòng)
(2)ondrag：源對(duì)象被拖動(dòng)過(guò)程中(鼠標(biāo)可能在移動(dòng)也可能未移動(dòng))
(3)ondragend：源對(duì)象被拖動(dòng)結(jié)束
拖動(dòng)源對(duì)象可以進(jìn)入到上方的目標(biāo)對(duì)象可以觸發(fā)的事件：
(1)ondragenter：目標(biāo)對(duì)象被源對(duì)象拖動(dòng)著進(jìn)入
(2)ondragover：目標(biāo)對(duì)象被源對(duì)象拖動(dòng)著懸停在上方
(3)ondragleave：源對(duì)象拖動(dòng)著離開(kāi)了目標(biāo)對(duì)象
(4)ondrop：源對(duì)象拖動(dòng)著在目標(biāo)對(duì)象上方釋放/松手
拖拽API總共就是7個(gè)函數(shù)?。?/p>
五、如何在拖動(dòng)的源對(duì)象事件和目標(biāo)對(duì)象事件間傳遞數(shù)據(jù)
HTML5為所有的拖動(dòng)相關(guān)事件提供了一個(gè)新的屬性：
e.dataTransfer { } //數(shù)據(jù)傳遞對(duì)象
功能：用于在源對(duì)象和目標(biāo)對(duì)象的事件間傳遞數(shù)據(jù)
源對(duì)象上的事件處理中保存數(shù)據(jù)：
e.dataTransfer.setData( k, v ); //k-v必須都是string類型
目標(biāo)對(duì)象上的事件處理中讀取數(shù)據(jù)：
var v = e.dataTransfer.getData( k );
示例一：實(shí)現(xiàn)一個(gè)可以隨著鼠標(biāo)拖動(dòng)而移動(dòng)的小飛機(jī)
提示：飛機(jī)需要絕對(duì)定位！ondrag事件中獲取鼠標(biāo)的坐標(biāo)值！??！
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin:0;
position: relative;
}
img{
position:absolute;
}
</style>
</head>
<body>
<h3>隨著鼠標(biāo)拖動(dòng)而移動(dòng)的小飛機(jī)</h3>
<img id="p3" src="img/p3.png" alt=""/>
<script>
p3.ondragstart=function(e){
console.log('事件源p3開(kāi)始拖動(dòng)');
//記錄剛一拖動(dòng)時(shí)，鼠標(biāo)在飛機(jī)上的偏移量
offsetX= e.offsetX;
offsetY= e.offsetY;
}
p3.ondrag=function(e){
console.log('事件源p3拖動(dòng)中');
var x= e.pageX;
var y= e.pageY;
console.log(x+'-'+y);
//drag事件最后一刻，無(wú)法讀取鼠標(biāo)的坐標(biāo)，pageX和pageY都變?yōu)?
if(x==0 && y==0){
return; //不處理拖動(dòng)最后一刻X和Y都為0的情形
}
x-=offsetX;
y-=offsetY;
p3.style.left=x+'px';
p3.style.top=y+'px';
}
p3.ondragend=function(){
console.log('源對(duì)象p3拖動(dòng)結(jié)束');
}
</script>
</body>
</html>
效果如下：
示例二：
模擬電腦中 ”垃圾桶“的效果， 總共顯示三個(gè)小飛機(jī)，拖動(dòng)著某個(gè)小飛機(jī)到垃圾桶上方后，小飛機(jī)從DOM樹(shù)上刪除
提示：刪除需要從DOM子節(jié)點(diǎn)中刪除元素，需要阻止ondragover的默認(rèn)行為??！利用源對(duì)象和目標(biāo)對(duì)象的數(shù)據(jù)傳遞記錄小飛機(jī)的ID值?。?！
重要信息：
ondragover有一個(gè)默認(rèn)行為?。?！那就是當(dāng)ondragover觸發(fā)時(shí)，ondrop會(huì)失效?。。?！這個(gè)可能是瀏覽器的版本問(wèn)題，需要以后瀏覽器不斷更新可能才會(huì)解決！！
如何阻止？
ondragover= function(e){ //源對(duì)象在懸停在目標(biāo)對(duì)象上時(shí)
e.preventDefault(); //阻止默認(rèn)行為，使得drop可以觸發(fā)
.....
}
ondrop= function(e){ //源對(duì)象松手釋放在了目標(biāo)對(duì)象中
.....
}
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
#trash {
opacity: .2;
margin: 15px;
}
</style>
</head>
<body>
<h3>拖動(dòng)飛機(jī)到垃圾桶后從DOM樹(shù)中刪除子元素</h3>
<img id="trash" src="img/trash_full.png">
<hr/>
<img id="p3" class="src" src="img/p3.png">
<img id="p4" class="src" src="img/p4.png">
<img id="p5" class="src" src="img/p5.png">
<script>
//為源對(duì)象添加事件監(jiān)聽(tīng) —— 記錄拖動(dòng)了哪一個(gè)源對(duì)象
var srcList = document.querySelectorAll('.src');//找到全部img元素
for(var i=0; i<srcList.length; i++){ //遍歷img元素
var p = srcList[i];
p.ondragstart = function(e){ //開(kāi)始拖動(dòng)源對(duì)象
e.dataTransfer.setData('PlaneID',this.id);//保存數(shù)據(jù)--該img元素的id
}
p.ondrag = function(){}
p.ondragend = function(){}
}
//為目標(biāo)對(duì)象添加事件監(jiān)聽(tīng) —— 刪除拖動(dòng)的源對(duì)象
trash.ondragenter = function(){ //源對(duì)象進(jìn)入目標(biāo)對(duì)象
console.log('drag enter');
trash.style.opacity = "1"; //將透明度變成1
}
trash.ondragleave= function(){ //源對(duì)象離開(kāi)目標(biāo)對(duì)象后
console.log('drag leave');
trash.style.opacity = ".2"; //將透明度變?yōu)?.2
}
trash.ondragover= function(e){ //源對(duì)象在懸停在目標(biāo)對(duì)象上時(shí)
e.preventDefault(); //阻止默認(rèn)行為，使得drop可以觸發(fā)
}
trash.ondrop= function(e){ //源對(duì)象松手釋放在了目標(biāo)對(duì)象中
console.log('drop');
trash.style.opacity = ".2"; //將透明度變?yōu)?.2
//刪除被拖動(dòng)的源對(duì)象
var id = e.dataTransfer.getData('PlaneID');//得到數(shù)據(jù)--id值
var p = document.getElementById(id); //根據(jù)id值找到相關(guān)的元素
p.parentNode.removeChild(p); //從父元素中刪除子節(jié)點(diǎn)
}
</script>
</body>
</html>
效果如下：
拖拽小飛機(jī)到垃圾桶刪除后：
如圖，原本三架小飛機(jī)，現(xiàn)在變成了兩架?。。?/p>
六、拖拽API的補(bǔ)充知識(shí)點(diǎn)?。。ㄖ匾?，面試中也許會(huì)問(wèn)到噢！?。?/strong>
面試題：
如何在網(wǎng)頁(yè)中顯示客戶端(電腦)的一張圖片？
如何拖動(dòng)客戶端的網(wǎng)頁(yè)顯示在服務(wù)器端下載的頁(yè)面中？
這兩個(gè)問(wèn)題是什么意思呢？
我們平時(shí)在電腦中拖拽一張圖片到瀏覽器中實(shí)現(xiàn)的下載操作?。?！按照H5之前的標(biāo)準(zhǔn)，要實(shí)現(xiàn)直接拖拽一張圖片到瀏覽器中顯示是無(wú)法完成??！但是自從H5新特性出來(lái)之后增加了拖拽API的特性，完美的實(shí)現(xiàn)了這一功能?。?！
應(yīng)用場(chǎng)合：
在某網(wǎng)站上，上傳圖片當(dāng)做是頭像
上傳相片...
HTML5新增的文件操作對(duì)象：
File： 代表一個(gè)文件對(duì)象
FileList： 代表一個(gè)文件列表對(duì)象，類數(shù)組
FileReader：用于從文件中讀取數(shù)據(jù)
FileWriter：用于向文件中寫出數(shù)據(jù)
相關(guān)函數(shù)：
div.ondrop = function(e){
var f = e.dataTransfer.files[0]; //找到拖放的文件
var fr = new FileReader(); //創(chuàng)建文件讀取器
fr.readAsURLData(f); //讀取文件內(nèi)容
fr.onload = function(){ //讀取完成
img.src = fr.result; //使用讀取到的數(shù)據(jù)
}
}
代碼如下：
<span style="font-size: 18px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#container {
border: 1px solid #aaa;
border-radius: 3px;
padding: 10px;
margin: 10px;
min-height: 400px;
}
</style>
</head>
<body>
<h1>拖放API的擴(kuò)展知識(shí)</h1>
<h3>請(qǐng)拖動(dòng)您的照片到下方方框區(qū)域</h3>
<div id="container"></div>
<script>
//監(jiān)聽(tīng)document的drop事件——取消其默認(rèn)行為：在新窗口中打開(kāi)圖片
document.ondragover = function(e){
e.preventDefault(); //使得drop事件可以觸發(fā)
}
document.ondrop = function(e){
e.preventDefault(); //阻止在新窗口中打開(kāi)圖片，否則仍然會(huì)執(zhí)行下載操作！?。?
}
//監(jiān)聽(tīng)div#container的drop事件，設(shè)法讀取到釋放的圖片數(shù)據(jù)，顯示出來(lái)
container.ondragover = function(e){
e.preventDefault();
}
container.ondrop = function(e){
console.log('客戶端拖動(dòng)著一張圖片釋放了...')
//當(dāng)前的目標(biāo)對(duì)象讀取拖放源對(duì)象存儲(chǔ)的數(shù)據(jù)
//console.log(e.dataTransfer); //顯示有問(wèn)題
//console.log(e.dataTransfer.files.length); //拖進(jìn)來(lái)的圖片的數(shù)量
var f0 = e.dataTransfer.files[0];
//console.log(f0); //文件對(duì)象 File
//從文件對(duì)象中讀取數(shù)據(jù)
var fr = new FileReader();
//fr.readAsText(f0); //從文件中讀取文本字符串
fr.readAsDataURL(f0); //從文件中讀取URL數(shù)據(jù)
fr.onload = function(){
console.log('讀取文件完成')
console.log(fr.result);
var img = new Image();
img.src = fr.result; //URL數(shù)據(jù)
container.appendChild(img);
}
}
</script>
</body>
</html></span>
效果如下：
總結(jié)
以上所述是小編給大家介紹的HTML5拖拽API經(jīng)典實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
html5視頻常用API接口的實(shí)戰(zhàn)示例
這篇文章主要介紹了html5視頻常用API接口的實(shí)戰(zhàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-03-20- Geolocation是HTML5標(biāo)準(zhǔn)下的一個(gè)Web API,利用它可以獲取設(shè)備的當(dāng)前位置信息（坐標(biāo)），本篇文章主要介紹了三個(gè)方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-04
HTML5拖放API實(shí)現(xiàn)拖放排序的實(shí)例代碼
HTML5 中提供了直接拖放的 API，極大的方便我們實(shí)現(xiàn)拖放效果，不需要去寫一大堆的 js，只需要通過(guò)監(jiān)聽(tīng)元素的拖放事件就能實(shí)現(xiàn)各種拖放功能。2017-05-11- 這篇文章主要為大家詳細(xì)介紹了不知道的幾個(gè)HTML5新功能，為大家分享出更多不為人知的HTML5 API，感興趣的小伙伴們可以參考一下2016-06-28
這篇文章主要介紹了HTML5 新增內(nèi)容和 API詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-17
