H5 元素拖放
2017-06-23 本文已影响0人
壬万er
今天分享一个元素拖放的案例，注意：这个是H5新增的；
先放图一张：
1.gif
代码：（一些API和细节都在代码注释里了）
<!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">可以拖动的文本</p>
</div>
<div></div>
<div></div>
<div></div>
<script>
//首先实现拖动要用到的方法有 dragenter dragover dragleave drop
var p = document.querySelector("p");
/*开始拖动的时触发。 只触发一次 在被拖动的元素上触发*/
p.addEventListener("dragstart",function () {
// console.log("p","dragstart..开始拖动")
});
/* 拖动的过程中触发。 只要元素在拖动，会一直重复触发 在被拖动的元素上触发*/
p.addEventListener("drag",function () {
// console.log("p","drag...")
});
/*进入另外一个元素的区域时触发. 是在目标元素上触发*/
document.addEventListener("dragenter",function (e) {
// console.log(e.target,"dragenter...进入目标区域");
var target = e.target;
if(target.tagName.toLocaleLowerCase() == "div" ){
target.style.backgroundColor = "red";
}
});
/* 在潜在目标区域的上方的时候会重复触发 */
document.addEventListener("dragover",function (e) {
e.preventDefault();
// console.log(e.target,"dragover...进入目标区域")
});
/*从潜在目标元素上方离开的时候触发*/
document.addEventListener("dragleave",function (e) {
// console.log(e.target,"dragleave...离开目标区域")
if(e.target.tagName.toLocaleLowerCase() == "div" ){
e.target.style.backgroundColor = "blue";
}
});
/*在松开鼠标拖放结束的时候触发*/
p.addEventListener("dragend",function () {
// console.log("p","drag...end")
});
/*释放拖动元素的时候触发。 这个事件是在dropend事件触发前触发。*/
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>
