介绍一下DataTransfer对象

1.元素的可拖拽属性

html5中增加了元素拖拽的支持,只需要增加一个属性draggable:true后,元素就被赋予了可拖拽的能力。

当元素可拖拽后,可给元素添加6类拖拽事件监听:

  • dragstart,开始拖拽事件。
  • dragenter, 拖拽进入事件。
  • dragleave, 拖拽离开事件。
  • dragover, 拖拽over事件。
  • drop,拖拽释放事件。
  • dragend, 拖拽结束事件。

    2. 拖拽中的dataTransfer对象。

    dataTransfer对象,就是元素拖拽事件中的拖拽实例对象。

如下,实现一个拖拽元素:

 <div id='test'>Drag the file here</div>
   var dom = document.getElementById('test');
    dom.setAttribute('draggable', 'true'); // 使元素可拖拽
    dom.addEventListener('dragstart', function (event) {
      console.log('dragstart: ' + event.dataTransfer); 
    });

3. DataTransfer的属性和方法

DataTransfer对象包含下面5个标准属性和4个标准方法。

标准属性

DataTransfer.dropEffect
获取当前所选拖放操作的类型,或将拖拽操作设置为新类型。值必须为none,copy,link或move中的一个。
DataTransfer.effectAllowed
提供可能的所有类型的操作。必须是none,copy,copyLink,copyMove,link,linkMove,move,all或uninitialized中的一个。
DataTransfer.files
拖拽的本地文件列表。如果拖动操作不涉及拖动文件,则此属性为空列表。
DataTransfer.items (只读)
提供DataTransferItemList对象,该对象是所有拖动数据的列表。
DataTransfer.types(只读)
在dragstart事件中设置数据格式,返回的是一个字符串数组。

标准方法

DataTransfer.clearData([format])
删除与给定类型关联的数据。format参数是可选的。如果类型为空或未指定,则删除所有关联的数据。如果指定类型的数据不存在,或者数据传输不包含任何数据,则此方法无效。
DataTransfer.getData(format)
返回给定类型的数据,如果该类型的数据不存在或数据传输不包含数据,则返回空字符串。
DataTransfer.setData(format, data)
设置给定类型的数据。如果该类型的数据不存在,则在末尾添加,以使列表中的最后一项成为新格式类型。如果该类型的数据已存在,则在相同位置把现有数据替换掉。
DataTransfer.setDragImage(img, xOffset, yOffset)
设置用于拖动的自定义图像。

下面用元素拖拽实现一个拖拽上传的demo:

 <div id='test'>Drag the file here</div>
document.addEventListener('drop', function (e) {
      e.preventDefault()
    }, false)
    document.addEventListener('dragover', function (e) {
      e.preventDefault()
    }, false)
    var dom = document.getElementById('test');
    dom.setAttribute('draggable', 'true');
    dom.addEventListener('drop', function (event) {
        console.log('drop: ' + event.dataTransfer);   
        var files = event.dataTransfer.files || [];  
        if (files[0]) {
          upload(files[0], dom)
        }
    });
var upload = function(file, dom) {
      var formData = new FormData();
      formData.append('file', file);
      // ajax上传
      var xhr = null;
      if (window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
      }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
      }
      // 上传结束 
      xhr.onload = function () {
        var result = JSON.parse(xhr.responseText);
         console.log(result, 'result')
        //  alert('')
        if (result.code === 1000) {
          alert('上传成功')
          dom.innerText = file.name
        }
      };
      xhr.open('POST', 'http://localhost:3060/file/uploadAvatar', true); 
      xhr.send(formData);
    }

upload4

demo代码仓库
用拖拽实现一个拖拽列表功能:

drag

demo代码仓库