一、拖拽API

設(shè)置對象可以拖動

<img draggable="true" />

事件

dragover有一個默認行為?。?！那就是當dragover觸發(fā)時，drop會失效?。。?！

    source.addEventListener('dragstart',function(ev){   
        console.log('源對象開始被拖動');
    },false)
   source.addEventListener('drag',function(ev){   
        console.log('源對象被拖動過程中(鼠標可能在移動也可能未移動)');
    },false)
   source.addEventListener('dragend',function(ev){   
        console.log('源對象被拖動結(jié)束');
    },false)

    process.addEventListener('dragenter',function(ev){  
        console.log('目標對象被源對象拖動著進入');
    },false)
    process.addEventListener('dragleave',function(ev){ 
        console.log('源對象拖動著離開了目標對象');
    },false)
   process.addEventListener('dragover',function(ev){  
        console.log('目標對象被源對象拖動著懸停在上方');
    },false)

    target.addEventListener('drop',function(ev){        // drop事件由c元素產(chǎn)生
        console.log('源對象拖動著在目標對象上方釋放/松手');
        ev.preventDefault();
    },false)
    document.ondragover = function(e){e.preventDefault();}

dataTransfer 對象

• 在所有拖放事件中提供了一個數(shù)據(jù)傳遞對象 dataTransfer，用于在源對象和目標對象間傳遞數(shù)據(jù)。

setData()
該方法向 dataTransfer 對象中存入數(shù)據(jù)。接收兩個參數(shù)，第一個表示要存入數(shù)據(jù)種類的字符串，現(xiàn)在支持有以下幾種：

text/plain：文本文字。
text/html：HTML文字。
text/xml：XML文字。
text/uri-list：URL列表，每個URL為一行。
第二個參數(shù)為要存入的數(shù)據(jù)。例如：

event.dataTransfer.setData('text/plain','Hello World');

getData()
該方法從 dataTransfer 對象中讀取數(shù)據(jù)。參數(shù)為在 setData 中指定的數(shù)據(jù)種類。例如：

event.dataTransfer.getData('text/plain');

clearData()
該方法清除 dataTransfer 對象中存放的數(shù)據(jù)。參數(shù)可選，為數(shù)據(jù)種類。若參數(shù)為空，則清空所有種類的數(shù)據(jù)。例如：

event.dataTransfer.clearData();

setDragImage()
該方法通過用img元素來設(shè)置拖放圖標。接收三個參數(shù)，第一個為圖標元素，第二個為圖標元素離鼠標指針的X軸位移量，第三個為圖標元素離鼠標指針的Y軸位移量。例如：

var source = document.getElementById('source'),
    icon = document.createElement('img');

icon.src = 'img.png';

source.addEventListener('dragstart',function(ev){
    ev.dataTransfer.setDragImage(icon,-10,-10)
},false)

圖片拖拽到網(wǎng)頁中并讀取

container.ondrop = function(e){
      console.log('客戶端拖動著一張圖片釋放了...')
      //當前的目標對象讀取拖放源對象存儲的數(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);
      }
    }