//拖拽元素
var box = document.querySelector(".box");
//目標(biāo)元素
var target = document.querySelector(".box2");
box.ondragstart = function (e) {
//console.log(1,"開始拖拽");
//dataTransfer 承載體，貫穿整個(gè)拖拽周期拒课，使用setData放置數(shù)據(jù)惶我，getData獲取數(shù)據(jù)
console.log(e.dataTransfer);
e.dataTransfer.effectAllowed = "move";
//e.target就是被拖拽的元素
e.dataTransfer.setData("text",e.target.id);
}
//瀏覽器禁止在元素上drop (禁止將其他元素拖到目標(biāo)元素上放手)
//需要在 dragover 時(shí)阻值瀏覽器的默認(rèn)事件才能出發(fā) ondrop(drop:落下浮毯，投下)
target.ondragover = function (e) {
//console.log(6,"在目標(biāo)元素上移動(dòng)");
e.preventDefault();
e.dataTransfer.dropEffect = "move";
}
target.ondrop = function (e) {
//console.log(7,"在目標(biāo)元素上放手");
//元素已經(jīng)存在時(shí)役纹，使用appendChild拼接到另一個(gè)元素中時(shí)焰望，并且從原來父元素中刪除
//console.log(e.dataTransfer.getData("text"));
var eId = e.dataTransfer.getData("text");
target.appendChild(document.querySelector("#"+eId));
}
其中：
* dataTransfer 貫穿于整個(gè)拖拽生命周期的承載對(duì)象
*
* dataTransfer.setData(format,content)
* format : 數(shù)據(jù)格式看成，支持text URL 或其他mieme類型
* content : 要傳遞的內(nèi)容
*
* dataTransfer.getData(format) 獲取通過setData設(shè)置的值
*
* dataTransfer.effectAllowed 設(shè)置拖拽元素的鼠標(biāo)效果
* 常見的有: copy link move none all copyLink...
* 當(dāng)指定為none時(shí)，ondrop無法觸發(fā)
* 只能在ondragstart里設(shè)置
*
* dataTransfer.dropEffect 設(shè)置在目標(biāo)元素的鼠標(biāo)效果
* 如果和 effectAllowed同時(shí)指定究履，則必須與 effectAllowed值相同脸狸，否則無法放置拖拽元素