本文介绍如何使用JavaScript实现鼠标拖动页面元素的功能。通过监听onmousedown、onmousemove和onmouseup事件，结合clientX/clientY坐标与元素偏移量计算，动态修改元素的left和top样式属性，从而实现自由拖拽效果。
JavaScript实现鼠标拖动元素功能详解
本示例演示如何将图标通过鼠标拖动至页面任意位置
代码实现
具体代码如下所示：
<body>
<div id="block" style="width:100px; height:100px; position:relative; background-color:#FF0000"></div>
<script>
var bb = document.getElementById("block");
bb.onmousedown = function(){
// 记录鼠标按下时的坐标位置
var pageX = event.clientX;
var pageY = event.clientY;
// 获取目标元素相对于视口的左边界和上边界坐标
var offX = parseInt(this.style.left)||0;
var offY = parseInt(this.style.top)||0;
// 计算鼠标点击点与元素左上角的偏移距离
var offLX = pageX-offX;
var offLY = pageY-offY;
if(!document.onmousemove){
document.onmousemove = function(){
bb.style.left=event.clientX-offLX; // 更新元素X轴位置
bb.style.top=event.clientY-offLY; // 更新元素Y轴位置
}
}
}
document.onmouseup = function(){document.onmousemove = null;} // 鼠标释放时移除移动监听
</script>
</body>