這篇文章主要為大家展示了“HTML5如何拖拽API”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5如何拖拽API”這篇文章吧。
創(chuàng)新互聯(lián)建站主營(yíng)鄂州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開發(fā),鄂州h5微信小程序開發(fā)搭建,鄂州網(wǎng)站營(yíng)銷推廣歡迎鄂州等地區(qū)企業(yè)咨詢一、關(guān)于拖拽API
拖拽API是HTML5的新特性,相對(duì)于其他新特性來(lái)說(shuō),重要程度占到6成,實(shí)際開發(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ì)象放置此處(已松手),也可以懸停后離開該區(qū)域。
四、拖拽API的相關(guān)函數(shù)
解釋了什么是源對(duì)象和目標(biāo)對(duì)象后,回歸前端中的拖拽API,由上面的操作我們可以得出幾個(gè)函數(shù)
被拖動(dòng)的源對(duì)象可以觸發(fā)的事件:
(1)ondragstart:源對(duì)象開始被拖動(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)著離開了目標(biāo)對(duì)象
(4)ondrop:源對(duì)象拖動(dòng)著在目標(biāo)對(duì)象上方釋放/松手
拖拽API總共就是7個(gè)函數(shù)??!
五、如何在拖動(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)值?。。?/p>
代碼如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin:0; position: relative; } img{ position:absolute; } </style> </head> <body> <h4>隨著鼠標(biāo)拖動(dòng)而移動(dòng)的小飛機(jī)</h4> <img id="p3" src="img/p3.png" alt=""/> <script> p3.ondragstart=function(e){ console.log('事件源p3開始拖動(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樹上刪除
提示:刪除需要從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> <h4>拖動(dòng)飛機(jī)到垃圾桶后從DOM樹中刪除子元素</h4> <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)聽 —— 記錄拖動(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){ //開始拖動(dòng)源對(duì)象 e.dataTransfer.setData('PlaneID',this.id);//保存數(shù)據(jù)--該img元素的id } p.ondrag = function(){} p.ondragend = function(){} } //為目標(biāo)對(duì)象添加事件監(jiān)聽 —— 刪除拖動(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ì)象離開目標(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ú)法完成?。〉亲詮腍5新特性出來(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> <h2>拖放API的擴(kuò)展知識(shí)</h2> <h4>請(qǐng)拖動(dòng)您的照片到下方方框區(qū)域</h4> <div id="container"></div> <script> //監(jiān)聽document的drop事件——取消其默認(rèn)行為:在新窗口中打開圖片 document.ondragover = function(e){ e.preventDefault(); //使得drop事件可以觸發(fā) } document.ondrop = function(e){ e.preventDefault(); //阻止在新窗口中打開圖片,否則仍然會(huì)執(zhí)行下載操作?。。?nbsp; } //監(jiān)聽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>
效果如下:
以上是“HTML5如何拖拽API”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞標(biāo)題:HTML5如何拖拽API-創(chuàng)新互聯(lián)
網(wǎng)站鏈接:http://muchs.cn/article42/cddeec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、微信小程序、靜態(tài)網(wǎng)站、定制開發(fā)、網(wǎng)站制作、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容