本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程(cainiaojc.com)。
(weixin_棉花糖)
原文链接:https://blog.csdn.net/weixin_46409887/article/details/105212416
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。