JS实现拖拽
上代码吧
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="ldiv"
style="margin-left:100px ; background: blue; width: 100px;height: 100px;position: fixed;z-index: 2;">
</div>
<div id="rdiv"
style="margin-left:500px ; background: red; width: 100px;height: 100px;position: fixed;">
</div>
<script>
let t_div;
class Drag {
constructor(id) {
this.cdiv = document.querySelector(id)
this.divX = 0;
this.divY = 0;
this.init();
}
init() {
this.cdiv.onmousedown = function (ev) {
this.divX = ev.clientX - (this.cdiv.offsetLeft);
this.divY = ev.clientY - (this.cdiv.offsetTop);
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this);
return false;
}.bind(this)
}
fnMove(ev) {
this.cdiv.style.marginLeft = ev.clientX - (this.divX) + 'px';
this.cdiv.style.marginTop = ev.clientY - (this.divY) + 'px';
}
fnUp() {
document.onmousemove = null;
document.onmouseup = null;
}
}
class LimitDrag extends Drag{
constructor(id){
super(id);
}
fnMove(ev){
super.fnMove(ev);
if(this.cdiv.offsetLeft <0){
this.cdiv.style.marginLeft = 0;
}
if(this.cdiv.offsetTop <0){
this.cdiv.style.marginTop = 0;
}
}
}
new Drag('#ldiv');
new LimitDrag('#rdiv');
</script>
<style>
</style>
</body>
</html>
LimitDrag继承于Drag类,重写了fnMove()方法,限制了拖动范围
H5拖拽实现
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>H5拖动</title>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
border: 1px solid #aaaaaa;
}
#dragtarget {
width: 100%;
height: 100%;
background: red;
color: azure;
margin: 0px;
text-align: center;
line-height: 35px;
}
</style>
</head>
<body>
<div class="droptarget">
<div draggable="true" id="dragtarget">
<span>散步</span>
</div>
</div>
<div class="droptarget"></div>
<script>
/* 拖动时触发*/
document.addEventListener("dragstart", (event) => {
//dataTransfer.setData()方法设置数据类型和拖动的数据
event.dataTransfer.setData("Text", event.target.id);
//修改拖动元素的透明度
event.target.style.opacity = "0.4";
});
document.addEventListener("drag", function (event) {
});
// 当拖完p元素重置透明度
document.addEventListener("dragend", function (event) {
event.target.style.opacity = "1";
});
/* 拖动完成后触发 */
// 当p元素完成拖动进入droptarget,改变div的边框样式
document.addEventListener("dragenter", function (event) {
if (event.target.className == "droptarget") {
event.target.style.border = "3px dotted red";
}
});
// 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
document.addEventListener("dragover", function (event) {
event.preventDefault();
});
// 当可拖放的p元素离开droptarget,重置div的边框样式
document.addEventListener("dragleave", function (event) {
if (event.target.className == "droptarget") {
event.target.style.border = "";
}
});
/*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
复位输出文本的颜色和DIV的边框颜色
利用dataTransfer.getData()方法获得拖放数据
拖拖的数据元素id(“drag1”)
拖拽元素附加到drop元素*/
document.addEventListener("drop", function (event) {
event.preventDefault();
if (event.target.className == "droptarget") {
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
</body>
</html>
这个就清晰多啦
h5的新特性,draggable属性,包括dom事件都非常清晰
希望给大家带来帮助。。。