JavaScript实现鼠标拖动元素功能详解

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>