使用JavaScript写拖拽案例

最新推荐文章于 2026-06-23 15:10:44 发布

原创最新推荐文章于 2026-06-23 15:10:44 发布 · 277 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #拖拽案例 #JavaScript

前端专栏收录该内容

5 篇文章

订阅专栏

这篇博客通过实例展示了如何使用JavaScript编写一个简单的拖拽功能。首先，通过CSS设置了一个可拖动的div元素，然后在HTML中创建了这个div。接着，利用JavaScript的onmousedown、onmousemove和onmouseup事件处理函数，实现了当鼠标按下、移动和松开时，div元素跟随鼠标移动并限制在浏览器视口内的效果。

// 设置HTML标签中的css样式。

//用全局选择器（*）把HTML中的默认样式去掉。

//设置一个拖拽用的div盒子。使用绝对定位。

css代码：

HTML代码：

//HTML中创建一个需要被拖拽的盒子

JS代码

//function中的"e"是要用鼠标和键盘事件时所需参数。
var e = e || event; //获取event对象
var X = e.clientX - box.offsetLeft; // 计算鼠标按下的时候到盒子的边界左边界距离；
var Y = e.clientY - box.offsetTop; // 计算鼠标按下的时候到盒子的边界上边界距离；
box.onmousemove = function(e){ //onmousemove 鼠标移动时的事件。
var e = e || event;
var moveX = e.clientX - X; // 计算盒子被移动后到浏览器左边界的距离；
var moveY = e.clientY - Y; // 计算盒子被移动后到浏览器上边界的距离；
var winX = document.documentElement.clientWidth; //计算文档可视宽的X轴距离
var winY = document.documentElement.clientHeight; //计算文档可视高的Y轴距离
var maxW = winX - box.offsetWidth; //计算文档的最大宽度
var maxH = winY - box.offsetHeight; //计算文档的最大高度
if(moveX < 0){ //进行判断，如果移动的X轴距离小于0.
moveX = 0; //则X轴的距离等于0。
}
if(moveY < 0){   //进行判断，如果移动的Y轴距离小于0。
moveY = 0   //则Y轴的距离等于0。
}
if(moveX > maxW){ //进行判断，如果鼠标移动的//则X轴的距离等于0。距离大于文档的最大可视宽度。
moveX = maxW //则让鼠标的移动//则X轴的距离等于0。距离等于文档文档的最大可视宽度。
}
if(moveY > maxH){   //进行判断，如果鼠标移动的//则Y轴的距离等于0。距离大于文档的最大可视宽度。
moveY = maxH   //则让鼠标的移动//则Y轴的距离等于0。距离等于文档文档的最大可视宽度。
}
box.style.left = moveX + "px"; //盒子被移动后左边界的距离；
box.style.top = moveY + "px"; //盒子被移动后上边界的距离；
}
}
document.onmouseup = function(){ //onmouseup鼠标按键被松开时的事件
document.onmousemove = null ; //清空被移动的函数；
}

</script>