//拖拽元素
var box = document.querySelector(".box");
//目标元素
var target = document.querySelector(".box2");
box.ondragstart = function (e) {
//console.log(1,"开始拖拽");
//dataTransfer 承载体，贯穿整个拖拽周期，使用setData放置数据，getData获取数据
console.log(e.dataTransfer);
e.dataTransfer.effectAllowed = "move";
//e.target就是被拖拽的元素
e.dataTransfer.setData("text",e.target.id);
}
//浏览器禁止在元素上drop (禁止将其他元素拖到目标元素上放手)
//需要在 dragover 时阻值浏览器的默认事件才能出发 ondrop(drop:落下，投下)
target.ondragover = function (e) {
//console.log(6,"在目标元素上移动");
e.preventDefault();
e.dataTransfer.dropEffect = "move";
}
target.ondrop = function (e) {
//console.log(7,"在目标元素上放手");
//元素已经存在时，使用appendChild拼接到另一个元素中时，并且从原来父元素中删除
//console.log(e.dataTransfer.getData("text"));
var eId = e.dataTransfer.getData("text");
target.appendChild(document.querySelector("#"+eId));
}
其中：
* dataTransfer 贯穿于整个拖拽生命周期的承载对象
*
* dataTransfer.setData(format,content)
* format : 数据格式，支持text URL 或其他mieme类型
* content : 要传递的内容
*
* dataTransfer.getData(format) 获取通过setData设置的值
*
* dataTransfer.effectAllowed 设置拖拽元素的鼠标效果
* 常见的有: copy link move none all copyLink...
* 当指定为none时，ondrop无法触发
* 只能在ondragstart里设置
*
* dataTransfer.dropEffect 设置在目标元素的鼠标效果
* 如果和 effectAllowed同时指定，则必须与 effectAllowed值相同，否则无法放置拖拽元素