從HTML5拖拽（一）我們得知：利用html5的dragable屬性以及一些拖拽事件可以進行拖拽，但是無法獲得所拖拽的數據。dataTransfer就應運而生，顧名思義，這是個傳遞數據的屬性。

基礎語法

dataTransfer 的api文檔：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

dataTransfer的常用方法：

1. setData(format,data):設置拖拽元素的信息

   • format：系統默認格式為： text/plain、text/html、text/xml、text/url-list（也可以自定義format，把format-data當key-value鍵值對使用）
   • data：保存在拖拽元素中的數據

2. getData(format)：獲取拖拽元素的信息

   • format：和setData里的format遙相呼應，才能取到相應的值

3. clearData()：清除拖拽信息

dataTransfer的常用屬性：

1. effectAllowed：設置拖拽時應帶有的樣式類型
2. dropEffect：設置拖拽元素被放下時的樣式
3. files：內含一系列文件信息，常用于將文件從桌面拖向瀏覽器

使用場景

情境1：從瀏覽器外把文件拖到投放區，并顯示文件信息

• html

        <!--投放區-->
        <div id="section">drag files into here</div>
        <!--信息表-->
        <table border="1" id="msg">
            <tr>
                <td>文件名</td>
                <td>文件大小</td>
                <td>文件類型</td>
            </tr>
        </table>

• js

            var msg = document.getElementById('msg');
            var section = document.getElementById('section'); 
            
            section.ondragover = function (event){
                var e = event||window.event;
                e.preventDefault();
                //拖拽元素進入投放區時，鼠標樣式變為move
                e.dataTransfer.dropEffect = 'move';
            };
            section.ondrop = function(event){
                var e = event||window.event;
                e.preventDefault();
                //拖拽元素進入投放區并投放時，顯示文件樣式          
                for(var i=0;i<e.dataTransfer.files.length;i++){
                    var file = e.dataTransfer.files[i];
                    //如果想知道file屬性里邊有什么有用的字段，可以console.log(e.dataTransfer.files[i])
                    var html = "<tr><td>"+file.name+"</td><td>"+file.size+"</td><td>"+file.type+"</td></tr>";
                    msg.innerHTML += html;
                }
                
                section.style.border = '1px solid #562356 ';
            };  

這樣就完美的解決了文件拖拽的難題了，而且支持多文件拖拽。

情境2：拖動文字到投放區

• html

        <!--拖拽對象-->
        <div id="target">鋤禾日當午，汗滴禾下土</div>
        <!--投放區-->
        <div id="section"></div>

• js

            var section = document.getElementById('section'); 
            var target = document.getElementById('target');
            var index = 0；//拖拽次數

            target.ondragstart = function (event){
                var e = event||window.event;
                index++;
                e.dataTransfer.effectAllowed = 'move'; //此時樣式已換成了move樣式
                e.dataTransfer.setData("num",index) ;//把拖拽的次數放進setData里邊
            };

            section.ondragover = function (event){
                var e = event||window.event;
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
            };
            section.ondrop = function(event){
                var e = event||window.event;
                //獲取系統自帶的拖拽信息，如果不需要把樣式也放進去， 可以把 text/html換成text/plain
                var t = e.dataTransfer.getData('text/html');
                var n = e.dataTransfer.getData('num');
                section.innerHTML = t+"<br/>"+"拖拽的次數為："+n;
                e.dataTransfer.clearData();//清除拖拽信息
            };