拖放API中的drag和drop實戰

原文地址：→傳送門

寫在前面

在HTML5以前，實現拖放功能須要藉助mousedown/mousemove/mouseover/mouseout/mouseup等鼠標事件來完成，HTML5中拖放API的出現使不少事情變簡單。下面是作筆記作筆記~

注：將來得及作兼容，請在chrome中打開。

• 源碼地址
• 栗子預覽1
• 栗子預覽2
• 栗子預覽3

拖放過程

1. 拖放：包括拖拽（drag）和釋放（drop）

2. 拖放中涉及兩個元素，分別是：源對象和目標對象，以下圖
   源對象是被拖拽的元素，目標對象是要釋放到的接收元素。
   

3. 拖放事件：

拖放事件流爲拖放操做開始後觸發的一系列事件，分爲如下兩類：

發生在源對象上的事件

dragstart:用戶開始拖動頁面中的某個元素時觸發的事件
drag: 源對象在拖拽過程當中持續觸發的事件
dragend:拖動完成時觸發的事件，通常用於清空拖動過程當中的狀態等。

發生在目標對象上的事件

dragenter:源對象進入到目標對象時，會觸發目標對象的ondragenter事件
dragleave:源對象移除以前調用了dragenter的元素時，目標元素觸發的事件
dragover：源對象進入目標對象後持續觸發的事件
drop：用戶釋放鼠標時，drop會在目標對象上被調用

4.設置元素可拖動

dragable = "true"

5.傳輸和控制--dataTransfer

dataTransfer對象可用於每一個拖放事件中。用於獲取和設置實際放置的數據，主要屬性及方法以下：

setData(format,data):在dragstart事件中調用此函數能夠註冊一個MIME類型格式的傳輸項。
getData(format):能夠獲取指定類型的註冊數據項。
types：屬性以數組形式返回全部當前註冊的格式。
items：返回全部項機器相關格式列表
files：返回與放置相關的全部文件
clearData():不帶參則清空全部註冊數據，帶參則移除指定註冊項
…………等等

來點兒小栗子

說小栗子前說下兩點：

• 觸發dragover事件時，須要使用preventDefault()方法阻止默認事件，drag事件才能正常觸發
• dataTransfer中的files屬性用到了File API規範的子集，files存放了文件列表，files支持下列屬性：

name:帶有擴展名的文件全名
type：文件的MIME類型
size：以字節爲單位的文件大小
lastModifiedDate：最後一次修改文件內容的時間戳

• 下面會用到的FileReader對象詳細請移步：
  FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

  其中File對象能夠是來自用戶在一個元素上選擇文件後返回的FileList對象,也能夠來自拖放操做生成的 DataTransfer對象,還能夠是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果.

1. 簡單的節點拖放
   可將任意節點拖放到其餘元素上，並插入到目標元素的前面
   拖放先後：
   

主要代碼：

/*目標對象上觸發的dragove事件*/
    drag.addEventListener('dragover', function (e) {
        e.preventDefault(); //阻止默認動做
    })
  
    /*源對象釋放，目標對象上觸發的事件*/
    drag.addEventListener('drop', function (e) {
        ele.classList.remove('draging');
        if (e.target.nodeName === 'LI') {
            e.target.parentNode.insertBefore(ele, e.target); //將源對象元素插入到目標元素前面
        }
    })

2.節點清除
可將龍貓丟進垃圾桶，即清除img元素節點
丟龍貓先後：

主要代碼：

<h3>拖動龍貓到垃圾桶後從DOM樹中刪除子元素</h3>  
      ![](./img/default.png)  
      <hr/>  
      ![](./img/01.jpeg)  
      ![](./img/02.jpg)  
      ![](./img/03.jpeg)  
      
      <script>  
      
        //爲源對象添加事件監聽 —— 記錄拖動了哪個源對象  
        var imgs = document.querySelectorAll('.imgs'); 
        var target = document.querySelector('#bin');

        for(var i=0; i<imgs.length; i++){   
          var pic = imgs[i];  
          pic.ondragstart = function(e){ //開始拖動源對象  
            e.dataTransfer.setData('imgID',this.id);//保存被拖拽源的id 
          }    
        }  
      
        //爲目標對象添加事件監聽 —— 刪除拖動的源對象   
        target.ondragover= function(e){    
          e.preventDefault();  //阻止默認行爲  
        }  
        target.ondrop= function(e){ //源對象鬆手釋放在了目標對象中   
          //刪除被拖動的源對象  
          var id = e.dataTransfer.getData('imgID');  
          var p = document.getElementById(id);   
          p.parentNode.removeChild(p);  //從父元素中刪除子節點  
        }  
      
      </script>

1. 將本地圖片拖放到頁面中指定區域
   可將你的美圖拖到網頁中顯示
   爆照先後效果：
   
   主要代碼：

var content = document.querySelector('#content');

    document.addEventListener('dragover',function(e){
        e.preventDefault(); //阻止document的默認事件
    });

    document.addEventListener('drop',function(e){
        e.preventDefault(); //阻止document的默認事件(阻止照片在新窗口中打開)
    });

    content.addEventListener('dragover',function(e){
        e.preventDefault();
    })

    content.addEventListener('drop',function(e){
        var imgFs = e.dataTransfer.files[0];  //files存放了文件列表
        //console.log(imgFs);
        var fs = new FileReader();  //建立一個FileReader對象
        fs.readAsDataURL(imgFs);
        /*圖片資源加載完成以後顯示在content中*/
        fs.onload = function(){
            var img = new Image();
            img.src = fs.result;
            content.appendChild(img);
        }
    })

小結

對今天學習的知識點作個記錄，歡迎大佬們指正~