HTML5拖拽（二）--dataTransfer

从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();//清除拖拽信息
            };