目录
前言
JavaScript的拖拽效果是一种常见的交互技术,它允许用户通过鼠标操作在网页中拖拽(拖动)元素。这种技术可以为网站和应用程序带来多种用途和好处,如:增强用户体验,实现拖放功能,图形设计和游戏,排序和重新排列,数据可视化,创建可自定义界面等等。总之,JavaScript的拖拽效果是一种强大的交互技术,可以提高用户体验、增加网站或应用程序的功能性,并创造更富有创意和直观的用户界面。
实现思路
获取事件对象和坐标点:
- 当鼠标按下时,触发
mousedown
事件。- 在
mousedown
事件处理程序中,可以使用事件对象来获取鼠标点击的坐标点,通常使用event.clientX
和event.clientY
属性来获取鼠标相对于视窗的坐标点。配合定位:
- 要实现拖拽效果,通常需要操作被拖拽的元素的位置。这可以通过设置元素的
style.left
和style.top
属性来实现。- 在
mousedown
事件处理程序中,可以记录鼠标点击时元素的初始位置(通常是元素的左上角坐标)。鼠标事件监听:
- 在
mousedown
事件中,将鼠标的mousemove
和mouseup
事件监听器附加到document
上。这是因为当用户按住鼠标拖动元素时,鼠标可能会离开元素,但我们仍然要捕获移动和释放事件。拖拽过程:
- 在
mousemove
事件处理程序中,计算鼠标移动的距离(新坐标点与初始坐标点之间的差值)。- 使用这个差值来更新元素的位置,将初始位置坐标与差值相加,并将结果分别赋给
style.left
和style.top
。- 这样,元素将跟随鼠标的移动而移动。
停止拖拽:
- 当用户释放鼠标按钮时,触发
mouseup
事件。- 在
mouseup
事件处理程序中,移除mousemove
和mouseup
事件监听器,以停止拖拽操作。
代码实现(代码讲解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.wp {
width: 200px;
height: 200px;
background: #04be02;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="wp"></div>
</body>
</html>
<script>
// 获取拖拽元素
let wp = document.querySelector('.wp')
// 当鼠标按下时
wp.onmousedown = function(){
// 计算鼠标点击点距离元素左边和上边的距离
let diX = event.clientX - wp.offsetLeft;
let diY = event.clientY - wp.offsetTop;
console.log(diX,diY);
// 在文档上添加鼠标移动事件监听器
document.onmousemove = function(){
// 计算元素新的左上角坐标
let oLeft = event.clientX - diX;
let oTop = event.clientY - diY;
// 限制元素不超出页面边界
if (oLeft <= 0) {
oLeft = 0;
}
if (oTop <= 0) {
oTop = 0;
}
let maxLeft = window.innerWidth - wp.offsetWidth;
let maxTop = window.innerHeight - wp.offsetHeight;
if (oLeft >= maxLeft) {
oLeft = maxLeft;
}
if (oTop >= maxTop) {
oTop = maxTop;
}
// 设置元素的定位位置
wp.style.left = oLeft + 'px';
wp.style.top = oTop + 'px';
}
}
// 当鼠标释放时,移除鼠标移动事件监听器,停止拖拽
document.onmouseup = function(){
document.onmousemove = null;
}
</script>