本文介绍如何通过JavaScript实现元素的拖拽功能，并在拖动过程中限制其边界。主要涉及offsetLeft/offsetTop属性，以及利用e.clientX/e.clientY获取鼠标位置，结合document.documentElement.clientWidth来设定拖拽范围。
主要思路
1.首先获取鼠标在方块中的位置，以下用到的知识点
- offsetLeft/offsetTop(元素相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档)
- e.clientX/e.clientY
2.移动时鼠标的位置减去按下的时候鼠标在方块中的位置，将这个位置设置边界（range函数）
知识点
- document.documentElement.clientwidth返回整个文档的可见宽度
//判断边界问题
//loc当前位置，Min最小位置，max最大位置
function range(loc,min,max) {
if(loc > max) {
return max;
}else if(loc < min) {
return min;
}else {
return loc;
}
}
全部代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
最低0.47元/天 解锁文章
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
