1.处理步骤

a.定义可拖动目标

b.定义被拖动的数据，可能为多种不同的格式

c.允许设置拖拽效果

d.定义放置区域

e.在drop发生的时候做一些事情

2.DataTransfer

用来保存被拖动的数据。可以保存一项或多项数据、一种或多种数据类型

注意： 在所有的拖动事件属性dataTransfer都是可用的，但是不能单独创建

方法：setData() 设置数据   、  getData() 取得数据

3.拖放事件

（1）dragstart   ——  拖拽开始

注意：元素默认都是可以被拖拽的设置属性draggable=“true”

           如果设置为false，则无法进行拖拽

（2）dragend    ——   拖拽结束

（3）dragenter   ——   拖拽时，鼠标进入。    通常在这里添加效果

（4）dragover   ——     拖拽时，鼠标略过，重复执行

        设置目标元素允许接受拖放元素 -----  e.preventDefault();

（5）dragleave   ——    拖拽时，鼠标离开。  通常在这里移除效果

（6）drop  ——    拖放的时候放下

注意：默认所有的标签都支持拖拽，前提是：需要给该标签添加draggable属性，并且值为true。该属性是H5中新增属性，不添加则标签无此属性，部分浏览器可能存在不兼容现象

---

例一：图片拖拽效果

var img = document.querySelector('#img');

var div = document.querySelector('#div');

// 开始拖拽时触发的事件：dragStart

img.ondragstart = function () {

       // 获取到当前拖拽的数据

       e.dataTransfer.setData('type/img', this.id);

}

// 鼠标拖拽着标签进入到另一个标签内部后，触发:dragenter事件

div.ondragenter = function () {

         this.style.boxShadow = '0px 0px 20px  pink';

}

div.ondragleave = function () {

              this.style.boxShadow = '0 0 0 pink';

}

// 鼠标拖拽着标签进入到另一个标签内部后，鼠标不断运动，会触发：dragover事件

div.ondragover = function () {

        return false;  //不要执行dragover事件，直接执行drop事件

}

// 如果要触发drop事件，则必须清理掉标签的dragover事件。因为dragover事件只要被触发，就会拦截drop事件，直接执行dragend事件。

div.ondrop = function () {

       var id = e.dataTransfer.getData('type/img');

       console.log(id);

       id = '#' + id;

       var imgTag = document.querySelector(id);

       this.appendChild(imgTag);

       this.style.boxShadow = '0 0 0 pink';

}

---

例子二：jq实现标签拖拽

$(function () {

      $('#img').on('dragstart', function (e) {

            console.log(e.originalEvent);

            e.originalEvent.dataTransfer.setData('type/img', this.id);

      });

       $('.div').on('dragover', function () {

           return false;

       }).on('drop', function (e) {

              var id = e.originalEvent.dataTransfer.getData('type/img');

              id = '#' + id;

              $(this).append($(id));

        })

})

---

例四：从本地磁盘拖拽图片到html文档

css:         div { margin: 100px auto;    width: 300px;     height: 300px;      border: 10px dotted gray;

                       text-align: center;      line-height: 300px;        color: rgb(151, 156, 158);        font-size: 1.5em;   }

html:     <div id="wrap">请将文件拖拽进内部</div>

// 获取到容器

var wrap = document.querySelector('#wrap');

// 给容器绑定事件

wrap.ondragenter = function () {

this.style.backgroundColor = 'gray';

}

wrap.ondragleave = function () {

this.style.backgroundColor = 'white';

}

// 取消over事件，保证drop事件能触发

wrap.ondragover = function () {

return false;

}

// 绑定drop事件，通过该事件函数获取到拖拽的图片信息，并拼接进wrap标签内部

wrap.ondrop = function (e) {

this.style.backgroundColor = 'white';

var that = this;

// 获取到用户拖拽进来的文件信息:获取的是图片在本地磁盘中的路径

var file = e.dataTransfer.files[0];

// console.log(file);

// 创建文件读取对象

var fileReader = new FileReader();

// 给对象绑定load事件函数，当对象把路径下的数据读取完毕后，会触发该函数，从该函数中获取到读取的内容

fileReader.onload = function (e) {

// 获取读取出来的图片数据

var data = e.target.result;

// console.log(data);

// 把图片暂存在浏览器中

that.style.background = 'url(' + data + ') no-repeat center';

that.style.backgroundSize = '100%';

that.innerText = '';

};

// 让读取对象读取用户拖拽的文件的路径

fileReader.readAsDataURL(file);

// 取消默认事件

return false;

}