鼠标拖移事件（练习）

最新推荐文章于 2022-06-02 19:45:39 发布

会做饭的技术男

最新推荐文章于 2022-06-02 19:45:39 发布

阅读量120

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h21bkajh1a1j.html

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background: red;position: absolute;"></div>
<script type="text/javascript">
var box=document.getElementById("box");
box.οnmοusedοwn=function(ev){ //鼠标按下事件
var e=event||ev;
var mx=e.clientX; //获得可视区域坐标
var my=e.clientY;
var dx=this.offsetLeft; //鼠标到div的坐标值
var dy=this.offsetTop;
var disx=mx-dx; // 窗口到外边距坐标值
var disy=my-dy;
document.οnmοusemοve=function(er){
var e=event||ev
var mx=e.clientX;
var my=e.clientY;
var x=mx-disx; //移动的坐标值
var y=my-disy;
box.style.left=x+"px"; //设置
box.style.top=y+"px";
}
document.οnmοuseup=function(ev){ //点击鼠标松开
document.οnmοusemοve=null; //不移动
}
}
</script>
</body>
</html>