安徽省工程建设工程信息网站品牌推广部
目录
前言
实现思路
获取事件对象和坐标点：
配合定位：
鼠标事件监听：
拖拽过程：
停止拖拽：
代码实现（代码讲解）
前言
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>