DataTransfer 对象

2018-01-19

DataTransfer 对象

拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个Data

Transfer对象，该对象包含如下属性和方法：

dataTransfer.dropEffect: 设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不在effectAllowed属性设置的多种拖放行为内，拖放操作将会失败。该属性值只允许为“none”、“copy”、“link”、“move”四个值之一
dataTransfer.effectAllowed: 设置或返回拖动元素允许发生的拖动行为。该属性值可设置为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”
dataTransfer.items: 该属性返回DataTransferitems对象，该对象代表了拖动数据
dataTransfer.setDragimage(element,x,y): 设置拖放操作的自定义图标。其中element设置自定义图表，x设置图标与鼠标水平方向的距离；y设置图标与鼠标在垂直方向的距离
dataTransfer.addElement(element): 添加自定义图标
dataTransfer.types: 该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型
dataTransfer.getData(format): 获取DataTransfer对象中format格式的数据
dataTransfer.setData(format, data): 向DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据
dataTransfer.clearData([format]): 清除DataTransfer对象中format格式的数据，如果省略format格式，则意味着清除DataTransfer对象中的全部数据

一个允许通过拖放来添加、删除“收藏项的功能”

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>通过拖放来添加、删除“收藏项的功能”</title>
  <style>
    .suo{
      width: 49%;
      height: 200px;
      border: 1px solid red;
      float: left;
    }
    #shou{
      width: 50%;
      height: 200px;
      border: 1px solid red;
      border-left: 0px;
      float: left;
    }
    h3{
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="suo">
    <h3>所有项目</h3>
    <div draggable="true" ondragstart="dsHandler(event);">项目1:法国红酒</div>
    <div draggable="true" ondragstart="dsHandler(event);">项目2：三天打鱼复古红包</div>
    <div draggable="true" ondragstart="dsHandler(event);">项目3：电饭锅愉快</div>
    <div draggable="true" ondragstart="dsHandler(event);">项目4：体育局农科教你</div>
  </div>
  <div id="shou">
    <h3>收藏项目</h3>
  </div>
  <img src="../img/images.jpg" alt="" id="chi">
  <script>
    const shou = document.getElementById("shou");
    //从所有项目中开始拖动
    let dsHandler = function(evt){
      evt.dataTransfer.setData("text/plain","<item>" + evt.target.innerHTML);
    }
    shou.ondrop=function(evt){
      let text = evt.dataTransfer.getData("text/plain");
      if (text.indexOf("<item>") == 0) {
        let newEle = document.createElement("div");
        newEle.id = new Date().getUTCMilliseconds();
        newEle.innerHTML = text.substring(6);
        newEle.draggable = "true";
        newEle.ondragstart = function(evt){
          evt.dataTransfer.setData("text/plain","<remove>" + newEle.id);
        }
        shou.appendChild(newEle);
      }
    }
    //当被拖到id“chi”时触发
    document.getElementById("chi").ondrop = function(evt){
      let id = evt.dataTransfer.getData("text/plain");
      if (id.indexOf("<remove>") == 0) {
        let target = document.getElementById(id.substring(8));
        shou.removeChild(target);
      }
    }
    document.ondragover = function(evt){
      return false;
    }
    document.ondrop = function(evt){
      return false;
    }
  </script>
</body>
</html>

拖放行为

通过设置DataTransfer对象的effectAllowed、dropEffect两个属性控制拖放行为。effectAllowed用于控制被拖动元素的拖动行为，因此通常建议在ondragstart事件监听中设置DataTransfer对象的effectAllowed属性；而dropEffect则控制被“放”入的目标组件的行为，因此通常建议在ondragover事件监听器中设置DataTransfer对象的dropEffect属性

如果effectAllowed设为none，则不允许拖动该元素
如果dropEffect设置为none，则被拖动的元素不能“放”到本元素中
如果effectAllowed设置为all或者不设置，则dropEffect可设置为任何属性
如果effectAllowed指定了特定的施放行为，例如move、copy等，那么dropEffect指定的属性值必须是effectAllowed指定的多个属性值的子集。

改变拖放的图标

通过DataTransfer对象的setDragImage还可以改变施放图标

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>改变拖放图标</title>
<style>
    #one {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="one" draggable="true">
    看世间，万物皆虚妄。
  </div>
  <script>
    let one = document.getElementById("one");
    let two = document.getElementById("two");
    let myIcon = document.createElement("img"); //创建图片标签
    myIcon.src = "../img/download.jpg";         //引入图片路径
    document.ondragstart = function(evt){
      let dt = evt.dataTransfer;
      dt.effectAllowed = "copy";
      dt.setDragImage(myIcon, 0, 0);
      dt.setData("text/plain","wenlai1010.github.io");
    }
    document.ondragover = function(e){
      return false;
    }
  </script>
</body>
</html>