本文详细解析了JavaScript中实现鼠标拖拽功能的完整代码。通过监听mousedown、mousemove和mouseup事件，结合clientX/Y与offsetLeft/Top计算相对位移，实现DOM元素的自由移动。文章提供了CSS定位、HTML结构及JS逻辑的完整示例，适合前端开发者参考学习。
JavaScript实现DOM元素拖拽功能：原理与代码解析
本文分享了一个JavaScript实现鼠标拖拽功能的完整示例，供读者参考学习。
效果展示如下图所示：
相关的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>核心JavaScript逻辑代码如下：
<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鼠标拖拽功能的完整介绍，希望能为读者的学习提供有益帮助，同时也欢迎大家继续支持本站获取更多技术内容。