實現(xiàn)拖拽效果

源元素 - 要拖拽的文件
目標(biāo)元素 - 要拖拽到哪里去

目前實現(xiàn)拖拽效果

使用原生DOM就能實現(xiàn) - 最麻煩
使用jQuery的插件
HTML5種提供的拖拽功能

HTML5拖拽

 1）源元素事件

   dragStart - 當(dāng)鼠標(biāo)開始拖放時被觸發(fā)
   drag - 當(dāng)鼠標(biāo)拖放過程中被觸發(fā)
   dragend 當(dāng)鼠標(biāo)拖放結(jié)束時被觸發(fā)
    
 2）目標(biāo)元素事件

    dragover - 當(dāng)鼠標(biāo)到達(dá)目標(biāo)元素被觸發(fā)，會反復(fù)觸發(fā)
    dragenter - 當(dāng)鼠標(biāo)拖放進(jìn)入到目標(biāo)元素內(nèi)觸發(fā)
    drop - 當(dāng)鼠標(biāo)實現(xiàn)拖放效果時被觸發(fā)

       問題：HTML頁面默認(rèn)不允許拖放，稱之為HTML頁面的默認(rèn)行為
       
       解決：在dragover的事件中組織默認(rèn)行為即可event.preventDefault();

    dragleave - 當(dāng)鼠標(biāo)離開目標(biāo)元素時觸發(fā)

 3）dataTransfer對象

      作用：類似于window系統(tǒng)的剪切板功能
      功能：可以將源元素的信息，存儲在這里，提供給目標(biāo)元素

      使用：

         使用事件對象獲取到dataTransfer對象
         var trans = event.dataTransfer;

         設(shè)置數(shù)據(jù)
         setData(type,data)方法
       
           type:類型，特指標(biāo)識(id)，一般為字符串
           data:設(shè)置的數(shù)據(jù)內(nèi)容

         獲取數(shù)據(jù)
         getData(type);

         清除數(shù)據(jù)
         clearData(type) 

         所有的數(shù)據(jù)內(nèi)容，存儲在瀏覽器內(nèi)存中，當(dāng)使用完數(shù)據(jù)內(nèi)容時，要清除

         事件對象 - 作為事件處理函數(shù)的參數(shù)存在

           DOM底層代碼的默認(rèn)寫法就是event,如果直接使用event就可以不穿event參數(shù)，這種寫法不標(biāo)準(zhǔn)
 
 4）從本地拖拽文件到頁面中

     var transfer = event.dataTransfer;
 
     //找到拖拽的文件
     var file = transfer.files[0];
 
     //新建文件讀取對象
     var reader = new FileReader();
 
     //讀取文件
     reader.readAsDataURL(file);
     
     //讀取完以后加載
     reader.onload = function(){
     
       d1.innerHTML = "<img src"+reader.result+">";
     }