一春哨、拖拽API

設置對象可以拖動

<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ù)柱徙，第一個為圖標元素缓屠，第二個為圖標元素離鼠標指針的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);
      }
    }