拖拽元素
最简单的方式拖拽，实现就是，给div 添加一个鼠标按下的事件onmousedown，在onmousedown 事件中在添加文档的鼠标移动事件onmousemove，并且在onmousemove事件中设置div
的属性 前提 div元素必须是position：absulote 绝度定位 ，之后在给div添加onmouseup事件，在此事件中把 document的onmousemove事件设置为null。
这种方法不现实，如果是10个div拖拽呢？
var div=document.querySelector("div"); div.onmousedown=function(e){
//当我们鼠标按下的时候，获取鼠标离div 左边和上边的距离
var x=e.offsetX;
var y=e.offsetY;
document.onmousemove=function(e){ div.style.position="absolute";
//减去x和y 就是当我们点击鼠标拖拽的时候，不减去总会在元素的左上角，减去点击哪里拖拽就在哪里拖拽 div.style.left=e.clientX-x+"px"; div.style.top=e.clientY-y+"px"; } div.onmouseup=function(e){
//当鼠标按键松开时，移除document的鼠标移动事件 document.onmousemove=null; } }
第二种方法,封装成方式，可以多个拖拽元素调用，尽量不要在函数中出现全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector("div");
var x=0;
var y=0;
//这里也可以不用定义 我们使用对象添加属性的方式
div.addEventListener("mousedown",mouseDownHandler);
function mouseDownHandler(e){
x=e.offsetX;
y=e.offsetY;
//this.x=e.offsetX;
//this.y=e.offsetY;
//替换div
document.elem=this;
document.addEventListener("mousemove",mouseMoveHandler);
this.addEventListener("mouseup",mouseUpHandler);
}
function mouseMoveHandler(e){
//这里就的this是document，因为鼠标移动事件是给document的添加的
//div.style.left=e.clientX-this.x+"px";
//div.style.left=e.clientX-this.y+"px";
//这里还是div 后续封装的话也是一个缺点
div.style.left=e.clientX-x+"px";
div.style.top=e.clientY-y+"px";
//以上代码就可以改成this.eleme.style.left=e.client-this.x+“px”;
}
function mouseUpHandler(e){
document.removeEventListener("mousemove",mouseMoveHandler);
}
</script>
</body>
</html>
拖拽多个div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var div=document.querySelectorAll("div");
for(var i=0;i<div.length;i++){
div[i].addEventListener("mousedown",mouseDownHandler);
}
function mouseDownHandler(e){
//阻止默认行为
e.preventDefault();
document.x=e.offsetX;
document.y=e.offsetY;
document.elem=this;
document.addEventListener("mousemove",mouseMoveHandler);
this.addEventListener("mouseup",mouseUpHandler);
}
function mouseMoveHandler(e){
this.elem.style.left=e.clientX-this.x+"px";
this.elem.style.top=e.clientY-this.x+"px";
}
function mouseUpHandler(e){
document.removeEventListener("mousemove",mouseMoveHandler);
}
</script>
</body>
</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>
<style>
div{
background-color: red;
width: 50px;
height: 50px;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
//获取div
var div=document.querySelector("div");
//添加事件
div.addEventListener("mousedown",mouseHandler);
//事件回调函数
function mouseHandler(e){
//多重判断e.type e.type就是事件的名称，如果是点击事件就是click
switch(e.type){
//如果是鼠标按下事件
case "mousedown":
//阻止默认行为
e.preventDefault();
//给document添加鼠标移动事件，并且调用自身 why？ 以为你会判断e.type
document.addEventListener("mousemove",mouseHandler);
//前期学事件的loop的时候，我们都没明白 之间的执行原理，先执行普通的语句，如果是异步 会放到队列中
this.addEventListener("mouseup",mouseHandler);
//给div添加一个x的属性，并赋值鼠标点击的位置
this.x=e.offsetX;
this.y=e.offsetY;
//给文档添加一个属性并把div赋值给文档
document.elem=this;
break;
//鼠标移动事件
case "mousemove":
//设置div的left=当前鼠标在文档的x坐标减去鼠标离div的x距离
document.elem.style.left=e.clientX-document.elem.x+"px";
document.elem.style.top=e.clientY-document.elem.y+"px";
break;
//鼠标释放事件
case "mouseup":
//移除文档移动事件
document.removeEventListener("mousemove",mouseHandler);
break;
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号