目录
前言
实现思路
代码实现（代码讲解）
<!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>
