拖拽小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="drag" style="left:0;top:0;width:100px;height:100px">拖拽小案例</div>
<style>
.drag {
background-color: skyblue;
position: absolute;
line-height: 100px;
text-align: center;
padding: 10px;
}
</style>
<script>
// 获取DOM元素;
let dragDiv = document.getElementsByClassName('drag')[0];
// 鼠标按下事件 处理程序
let putDown = function(event) {
dragDiv.style.cursor = 'move';
// 页面的所有宽度 - 移动盒子的宽度 获取出来可以移动的距离 如果窗口大小不变,这个就是一个常亮
const CLIENT_WIDTH = window.innerWidth - dragDiv.clientWidth;
const CLIENT_HEIGHT = window.innerHeight - dragDiv.clientHeight;
let offsetX = parseInt(dragDiv.style.left); // 获取当前的x轴距离
let offsetY = parseInt(dragDiv.style.top); // 获取当前的y轴距离
// let innerX = event.clientX - dragDiv.offsetLeft; // 获取鼠标在方块内的x轴距
// let innerY = event.clientY - dragDiv.offsetTop; // 获取鼠标在方块内的y轴距
let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
let innerY = event.clientY - offsetY; // 获取鼠标在方块内的y轴距
// 鼠标移动的时候不停的修改div的left和top值
document.onmousemove = function(event) {
event.preventDefault();
let pl = event.clientX - innerX;
let pt = event.clientY - innerY;
pl = pl <= 0 ? 0 : pl >= CLIENT_WIDTH ? CLIENT_WIDTH : pl;
pt = pt <= 0 ? 0 : pt >= CLIENT_HEIGHT ? CLIENT_HEIGHT : pt;
dragDiv.style.left = pl + 'px';
dragDiv.style.top = pt + 'px';
};
// 鼠标抬起时,清除绑定在文档上的mousemove和mouseup事件
// 否则鼠标抬起后还可以继续拖拽方块
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
};
// 绑定鼠标按下事件
dragDiv.addEventListener('mousedown', putDown, false);
</script>
</body>
</html>