12-盒子在界面拖拽
程序员文章站
2022-06-18 19:34:51
盒子拖拽简述：鼠标可以在界面中选中盒子，并在界面中进行拖拽html部分 Document &...
盒子拖拽
简述：鼠标可以在界面中选中盒子，并在界面中进行拖拽
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box" class="box"></div>
</script>
</body>
</html>
css部分
<style>
.box{
width: 200px;
height: 200px;
background-color: greenyellow;
position: absolute;
left: 0;
top: 0;
}
</style>
js部分
<script>
let box = document.querySelector(".box");
let divX = 0,
divY = 0,
mouseX = 0,
mouseY = 0,
disX = 0,
disY = 0;
box.onmousedown = function (e){
divX = this.offsetLeft;
divY = this.offsetTop;
mouseX = e.clientX;
mouseY = e.clientY;
box.onmousemove = function(e){
disX = e.clientX - mouseX;
disY = e.clientY - mouseY;
box.style.left = disX + divX + "px";
box.style.top = disY + divY + "px";
}
}
box.onmouseup = function(e){
box.onmousemove = null;
}
</script>
运行效果
面向对象盒子拖拽
其他部分不发生改变，只有js发生改变
js部分
<script>
//这里的this指的是新创建的对象
function Drag(dragId) {
this.div = document.getElementById(dragId);
this.mouseX = null;
this.mouseY = null;
this.divX = null;
this.divY = null;
this.newMouseX = null;
this.newMouseY = null;
this.newDivX = null;
this.newDivY = null;
this.init(); //调用函数
}
Drag.prototype.init = function(){
var that = this;
this.div.onmousedown = function (e) {
that.mouseX = e.clientX; //鼠标的x坐标
that.mouseY = e.clientY; //鼠标的y坐标
that.divX = that.div.offsetLeft; //盒子x坐标
that.divY = that.div.offsetTop; //盒子x坐标 that这里指的是全局对象
that.div.onmousemove = function (e) {
that.newMouseX = e.clientX; //鼠标的移动后的x坐标
that.newMouseY = e.clientY; //鼠标的移动后的y坐标
//鼠标移动的距离 = 盒子移动的距离 最后需要加上盒子的大小
that.newDivX = that.newMouseX - that.mouseX + that.divX + "px";
that.newDivY = that.newMouseY - that.mouseY + that.divY + "px";
that.move(that.newDivX,that.newDivY);
}
}
this.div.onmouseup = function (e) {
//鼠标移开 清空
that.div.onmousemove = null;
}
}
// move函数只负责移动，不负责计算
Drag.prototype.move = function (x,y) {
this.div.style.left = x;
this.div.style.top = y;
}
new Drag("div1");
new Drag("div2");
</script>
本文地址：https://blog.csdn.net/weixin_45344023/article/details/107881069