<script type="text/javascript">
//拖拽元素
var box3 = document.querySelector(".box3");
//目標(biāo)元素
var target = document.querySelector(".box2");
//拖拽元素的事件
box3.ondragstart = function(e){
console.log("拖拽開始");
console.log(e.dataTransfer);
//輸出結(jié)果是以下
/*
DataTransfer {dropEffect: "none",
effectAllowed: "uninitialized",
items:DataTransferItemList,
types: Array(0),
files: FileList}
dropEffect:"link"
effectAllowed:"link"
files:FileList
items:DataTransferItemList
types:Array(0)
__proto__:DataTransfer
*/
e.dataTransfer.effectAllowed = "link";
e.dataTransfer.setData("text",e.target.className);
}
box3.ondrag = function(){
//console.log("拖拽中");
}
box3.ondragend = function(){
//console.log("拖拽結(jié)束");
}
//目標(biāo)元素的事件
target.ondragenter = function(){
//console.log("進(jìn)入目標(biāo)元素");
}
target.ondragleave = function(){
//onsole.log("離開目標(biāo)元素");
}
//
target.ondragover = function(e){
//console.log("在目標(biāo)元素上移動");
e.preventDefault();//阻止瀏覽器的默認(rèn)事件 才可以觸發(fā)ondrop事件
e.dataTransfer.dropEffect = "link";
}
target.ondrop = function(e){
console.log("在目標(biāo)元素上放手");
//target.appendChild(box3);
var eclassName = e.dataTransfer.getData("text");
target.appendChild(document.querySelector("."+eclassName))
//在目標(biāo)元素里面追加拖拽的元素
}
</script>
dataTransfer 貫穿于整個拖拽生命的承載對象
setDate###
dataTransfer.setData(formata,content)
format:數(shù)據(jù)格式,支持text URL 或者其他MIME 類型
content:要傳遞的內(nèi)容
getData###
dataTransfer.getData(formata) 獲取通過setData設(shè)置的值
注意###
dataTransfer.effectAllowed (設(shè)置拖拽元素的鼠標(biāo)效果)
只能在 ondropstart 里設(shè)置###
常見的有:
copy link move none all copyLink ...
當(dāng)定為 none 時,ondrop 無法觸發(fā)
dataTransfer.dropEffect 設(shè)置目標(biāo)元素的鼠標(biāo)效果,如果和effectAllowed同時設(shè)定,則必須一致
