今天分享一個(gè)元素拖放的案例错沃，注意：這個(gè)是H5新增的梨撞；
先放圖一張：
1.gif
代碼：（一些API和細(xì)節(jié)都在代碼注釋里了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:400px;
height:100px;
background: blue;
margin-bottom:10px;
display: flex;
}
p{
width:200px;
height:50px;
margin:auto;
display: flex;
background: #fff;
align-items:center;
justify-content:center;
}
</style>
</head>
<body>
<div>
<p draggable="true">可以拖動(dòng)的文本</p>
</div>
<div></div>
<div></div>
<div></div>
<script>
//首先實(shí)現(xiàn)拖動(dòng)要用到的方法有 dragenter dragover dragleave drop
var p = document.querySelector("p");
/*開(kāi)始拖動(dòng)的時(shí)觸發(fā)。 只觸發(fā)一次 在被拖動(dòng)的元素上觸發(fā)*/
p.addEventListener("dragstart",function () {
// console.log("p","dragstart..開(kāi)始拖動(dòng)")
});
/* 拖動(dòng)的過(guò)程中觸發(fā)囤躁。 只要元素在拖動(dòng)呕诉，會(huì)一直重復(fù)觸發(fā) 在被拖動(dòng)的元素上觸發(fā)*/
p.addEventListener("drag",function () {
// console.log("p","drag...")
});
/*進(jìn)入另外一個(gè)元素的區(qū)域時(shí)觸發(fā). 是在目標(biāo)元素上觸發(fā)*/
document.addEventListener("dragenter",function (e) {
// console.log(e.target,"dragenter...進(jìn)入目標(biāo)區(qū)域");
var target = e.target;
if(target.tagName.toLocaleLowerCase() == "div" ){
target.style.backgroundColor = "red";
}
});
/* 在潛在目標(biāo)區(qū)域的上方的時(shí)候會(huì)重復(fù)觸發(fā) */
document.addEventListener("dragover",function (e) {
e.preventDefault();
// console.log(e.target,"dragover...進(jìn)入目標(biāo)區(qū)域")
});
/*從潛在目標(biāo)元素上方離開(kāi)的時(shí)候觸發(fā)*/
document.addEventListener("dragleave",function (e) {
// console.log(e.target,"dragleave...離開(kāi)目標(biāo)區(qū)域")
if(e.target.tagName.toLocaleLowerCase() == "div" ){
e.target.style.backgroundColor = "blue";
}
});
/*在松開(kāi)鼠標(biāo)拖放結(jié)束的時(shí)候觸發(fā)*/
p.addEventListener("dragend",function () {
// console.log("p","drag...end")
});
/*釋放拖動(dòng)元素的時(shí)候觸發(fā)。 這個(gè)事件是在dropend事件觸發(fā)前觸發(fā)台谍。*/
document.addEventListener("drop",function (e) {
// console.log(e.target,"drop...放下")
if(e.target.tagName.toLocaleLowerCase() == "div"){
p.parentNode.removeChild(p);
e.target.appendChild(p);
e.target.style.backgroundColor = "blue";
}
})
</script>
</body>
</html>
