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;
}
