JavaScript鼠标拖拽事件详解

本文实例为大家分享了js鼠标拖拽事件的详细实现代码,供大家参考,具体内容如下

图片如下:

css代码

<style>

*{

margin:0;

padding:0;

}

#box{

width: 200px;

height: 200px;

background: url("./img/aio.png") no-repeat;

background-size: cover;

position: absolute;/*定位元素 父级元素window就是初始包含块*/

top:0;

left:0;

}

</style>

html代码

<div id="box"></div>

js代码

<script>

//获取标签

var box=document.getElementById("box");

var body=document.body;

var x,y;//全局作用域

//鼠标按下事件 0级

box.onmousedown=function(e) {//传入形参e

var mx=e.clientX;//鼠标距离浏览器左

var my=e.clientY;//鼠标距离浏览器上

var bx=box.offsetLeft;//盒子距离浏览器左

var by=box.offsetTop;//盒子距离浏览器上

x=mx-bx;//实际盒子距离的浏览器左

y=my-by;//实际盒子距离的浏览器上

//鼠标移动事件 0级

body.onmousemove=function(e) {//拿到全局x、y、

//获取当前鼠标移动到的坐标点

var mx=e.clientX;

var my=e.clientY;

//盒子距离浏览器

box.style.left=mx-x +"px";

box.style.top=my-y +"px";

};

//鼠标弹起事件(松开)

box.onmouseup=function(e) {

body.onmousemove=null;//不做任何操作//dom0级事件解除事件绑定

//获取当前鼠标移动到的坐标点

var mx=e.clientX;

var my=e.clientY;

//盒子距离浏览器

box.style.left=mx-x +"px";

box.style.top=my-y +"px";

}

};

</script>

以上是 JavaScript鼠标拖拽事件详解 的全部内容, 来源链接: utcz.com/z/318019.html

回到顶部