HTML5如何拖拽API-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“HTML5如何拖拽API”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5如何拖拽API”這篇文章吧。

創(chuàng)新互聯(lián)建站主營鄂州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),鄂州h5微信小程序開發(fā)搭建,鄂州網(wǎng)站營銷推廣歡迎鄂州等地區(qū)企業(yè)咨詢

一、關(guān)于拖拽API

拖拽API是HTML5的新特性，相對于其他新特性來說，重要程度占到6成，實際開發(fā)中使用比例占到3成，學(xué)習(xí)要求個人認為是達到掌握即可的程度。

二、什么是拖拽和釋放？

拖拽：Drag

釋放：Drop

拖拽指的是鼠標(biāo)點擊源對象后一直移動對象不松手，一但松手即釋放了

三、什么是源對象和目標(biāo)對象？

HTML5如何拖拽API

源對象：指的是我們鼠標(biāo)點擊的一個事物，這里可以是一張圖片，一個DIV，一段文本等等。

目標(biāo)對象：指的是我們拖動源對象后移動到一塊區(qū)域，源對象可以進入這個區(qū)域，可以在這個區(qū)域上方懸停(未松手)，可以釋松手釋放將源對象放置此處(已松手)，也可以懸停后離開該區(qū)域。

四、拖拽API的相關(guān)函數(shù)

解釋了什么是源對象和目標(biāo)對象后，回歸前端中的拖拽API，由上面的操作我們可以得出幾個函數(shù)

被拖動的源對象可以觸發(fā)的事件：

(1)ondragstart：源對象開始被拖動

(2)ondrag：源對象被拖動過程中(鼠標(biāo)可能在移動也可能未移動)

(3)ondragend：源對象被拖動結(jié)束

拖動源對象可以進入到上方的目標(biāo)對象可以觸發(fā)的事件：

(1)ondragenter：目標(biāo)對象被源對象拖動著進入

(2)ondragover：目標(biāo)對象被源對象拖動著懸停在上方

(3)ondragleave：源對象拖動著離開了目標(biāo)對象

(4)ondrop：源對象拖動著在目標(biāo)對象上方釋放/松手

拖拽API總共就是7個函數(shù)！！

五、如何在拖動的源對象事件和目標(biāo)對象事件間傳遞數(shù)據(jù)

HTML5為所有的拖動相關(guān)事件提供了一個新的屬性：

e.dataTransfer { } //數(shù)據(jù)傳遞對象

功能：用于在源對象和目標(biāo)對象的事件間傳遞數(shù)據(jù)

源對象上的事件處理中保存數(shù)據(jù)：

e.dataTransfer.setData( k, v ); //k-v必須都是string類型

目標(biāo)對象上的事件處理中讀取數(shù)據(jù)：

var v = e.dataTransfer.getData( k );

示例一：實現(xiàn)一個可以隨著鼠標(biāo)拖動而移動的小飛機

提示：飛機需要絕對定位！ondrag事件中獲取鼠標(biāo)的坐標(biāo)值！！！

HTML5如何拖拽API

代碼如下：

<!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)拖動而移動的小飛機</h4>  
<img id="p3" src="img/p3.png" alt=""/>  
<script>  
    p3.ondragstart=function(e){  
        console.log('事件源p3開始拖動');  
        //記錄剛一拖動時，鼠標(biāo)在飛機上的偏移量  
        offsetX= e.offsetX;  
        offsetY= e.offsetY;  
    }  
    p3.ondrag=function(e){  
        console.log('事件源p3拖動中');  
        var x= e.pageX;  
        var y= e.pageY;  
        console.log(x+'-'+y);  
        //drag事件最后一刻，無法讀取鼠標(biāo)的坐標(biāo)，pageX和pageY都變?yōu)?  
        if(x==0 && y==0){  
            return; //不處理拖動最后一刻X和Y都為0的情形  
        }  
        x-=offsetX;  
        y-=offsetY;  
        p3.style.left=x+'px';  
        p3.style.top=y+'px';  
    }  
    p3.ondragend=function(){  
        console.log('源對象p3拖動結(jié)束');  
    }  
</script>  
</body>  
</html>

效果如下：

HTML5如何拖拽API

示例二：

模擬電腦中 ”垃圾桶“的效果，總共顯示三個小飛機，拖動著某個小飛機到垃圾桶上方后，小飛機從DOM樹上刪除

提示：刪除需要從DOM子節(jié)點中刪除元素，需要阻止ondragover的默認行為！！利用源對象和目標(biāo)對象的數(shù)據(jù)傳遞記錄小飛機的ID值！！！

重要信息：

ondragover有一個默認行為！！！那就是當(dāng)ondragover觸發(fā)時，ondrop會失效！！！！這個可能是瀏覽器的版本問題，需要以后瀏覽器不斷更新可能才會解決！！

如何阻止？

ondragover= function(e){  //源對象在懸停在目標(biāo)對象上時
  e.preventDefault();  //阻止默認行為，使得drop可以觸發(fā)
 .....
}
ondrop= function(e){  //源對象松手釋放在了目標(biāo)對象中
 .....
}

HTML5如何拖拽API

代碼如下：

<!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>拖動飛機到垃圾桶后從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>  
    //為源對象添加事件監(jiān)聽 &mdash;&mdash; 記錄拖動了哪一個源對象  
    var srcList = document.querySelectorAll('.src');//找到全部img元素  
    for(var i=0; i<srcList.length; i++){ //遍歷img元素  
      var p = srcList[i];  
      p.ondragstart = function(e){ //開始拖動源對象  
        e.dataTransfer.setData('PlaneID',this.id);//保存數(shù)據(jù)--該img元素的id  
      }  
      p.ondrag = function(){}  
      p.ondragend = function(){}  
    }  
    //為目標(biāo)對象添加事件監(jiān)聽 &mdash;&mdash; 刪除拖動的源對象  
    trash.ondragenter = function(){ //源對象進入目標(biāo)對象  
      console.log('drag enter');  
      trash.style.opacity = "1"; //將透明度變成1  
    }  
    trash.ondragleave= function(){  //源對象離開目標(biāo)對象后  
      console.log('drag leave');  
      trash.style.opacity = ".2"; //將透明度變?yōu)?.2  
    }  
    trash.ondragover= function(e){  //源對象在懸停在目標(biāo)對象上時  
      e.preventDefault();  //阻止默認行為，使得drop可以觸發(fā)  
    }  
    trash.ondrop= function(e){ //源對象松手釋放在了目標(biāo)對象中  
      console.log('drop');  
      trash.style.opacity = ".2"; //將透明度變?yōu)?.2  
      //刪除被拖動的源對象  
      var id = e.dataTransfer.getData('PlaneID');//得到數(shù)據(jù)--id值  
      var p = document.getElementById(id); //根據(jù)id值找到相關(guān)的元素  
      p.parentNode.removeChild(p);  //從父元素中刪除子節(jié)點  
    }  
  </script>  
</body>  
</html>

效果如下：

HTML5如何拖拽API

拖拽小飛機到垃圾桶刪除后：

HTML5如何拖拽API

如圖，原本三架小飛機，現(xiàn)在變成了兩架！！！

六、拖拽API的補充知識點！！（重要，面試中也許會問到噢！！）

面試題：

如何在網(wǎng)頁中顯示客戶端(電腦)的一張圖片？

如何拖動客戶端的網(wǎng)頁顯示在服務(wù)器端下載的頁面中？

這兩個問題是什么意思呢？

我們平時在電腦中拖拽一張圖片到瀏覽器中實現(xiàn)的下載操作！！！按照H5之前的標(biāo)準(zhǔn)，要實現(xiàn)直接拖拽一張圖片到瀏覽器中顯示是無法完成！！但是自從H5新特性出來之后增加了拖拽API的特性，完美的實現(xiàn)了這一功能！！！

應(yīng)用場合：

在某網(wǎng)站上，上傳圖片當(dāng)做是頭像

上傳相片...

HTML5新增的文件操作對象：

File：代表一個文件對象

FileList：代表一個文件列表對象，類數(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的擴展知識</h2>  
  <h4>請拖動您的照片到下方方框區(qū)域</h4>  
  <div id="container"></div>  
  <script>  
    //監(jiān)聽document的drop事件&mdash;&mdash;取消其默認行為：在新窗口中打開圖片  
    document.ondragover = function(e){  
      e.preventDefault(); //使得drop事件可以觸發(fā)  
    }  
    document.ondrop = function(e){  
      e.preventDefault(); //阻止在新窗口中打開圖片，否則仍然會執(zhí)行下載操作！！！  
    }  
    //監(jiān)聽div#container的drop事件，設(shè)法讀取到釋放的圖片數(shù)據(jù)，顯示出來  
    container.ondragover = function(e){  
      e.preventDefault();  
    }  
    container.ondrop = function(e){  
      console.log('客戶端拖動著一張圖片釋放了...')  
      //當(dāng)前的目標(biāo)對象讀取拖放源對象存儲的數(shù)據(jù)  
      //console.log(e.dataTransfer); //顯示有問題  
      //console.log(e.dataTransfer.files.length); //拖進來的圖片的數(shù)量  
      var f0 = e.dataTransfer.files[0];  
      //console.log(f0); //文件對象 File  
      //從文件對象中讀取數(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

以上是“HTML5如何拖拽API”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：HTML5如何拖拽API-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://chinadenli.net/article42/cddeec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、微信小程序、靜態(tài)網(wǎng)站、定制開發(fā)、網(wǎng)站制作、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5如何拖拽API-創(chuàng)新互聯(lián)