JavaScript拖拽效果
1.1 拖拽的 基本效果
思路：
- 鼠标在盒子上按下时，准备移动 (事件加给物体)
- 鼠标移动时，盒子跟随鼠标移动 （事件添加给页面）
- 鼠标抬起时，盒子停止移动 (事件加给页面)
var o = document.querySelector('div'); ? //鼠标按下 o.onmousedown = function (e) { //鼠标相对于盒子的位置 var offsetX = e.clientX - o.offsetLeft; var offsetY = e.clientY - o.offsetTop; //鼠标移动 document.onmousemove = function (e) { o.style.left = e.clientX - offsetX + "px"; o.style.top = e.clientY - offsetY + "px"; } //鼠标抬起 document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } }
若盒子中出现了文字，或盒子自身为图片，由于浏览器的默认行为(文字和图片本身就可以拖拽)，通过设置return false即可以。但是，拦截默认行为在IE低版本中，不适用；可以使用全局捕获来解决IE的问题。
1.2.1 全局捕获
全局捕获仅适用于IE低版本浏览器
一旦为指定节点添加全局捕获，则页面中其它元素就不会触发同类型事件
1.2.2 完整版的拖拽
var o = document.querySelector('div');
?
//鼠标按下
o.onmousedown = function (e) {
if (o.setCapture) {//IE低版本
o.setCapture()
}
e = e || window.event
//鼠标相对于盒子的位置
var offsetX = e.clientX - o.offsetLeft;
var offsetY = e.clientY - o.offsetTop;
//鼠标移动
document.onmousemove = function (e) {
e = e || window.event
o.style.left = e.clientX - offsetX + "px";
o.style.top = e.clientY - offsetY + "px";
}
//鼠标抬起
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
if (o.releaseCapture) {
o.releaseCapture();
//释放全局捕获
}
}
return false;
//标准浏览器的默认行为
}1.3 拖拽边界
可视区域宽度：
可视区域高度：
//屏幕的高度
// var h=document.documentElement.clientHeight
// var w=document.documentElement.clientWidth;
?
// console.log(h,w);
【JavaScript拖拽效果】分析：
最大left：可视区域宽度-盒子宽度
最小left：0
最小top: 0
最大top: 可视区域的高度-盒子的高度
1.4 碰撞
碰撞的重点在于寻找临界值。
文章图片
分别命名两个物体的四边为：L1,T1,R1,B1和L2,T2,R2,B2
若L1 > R2 || T1 > B2 || R1 < L2 || B1 < T2，则不碰撞
?推荐阅读
- 事件代理
- 数组常用方法一
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 【读书笔记】JavaScript|【读书笔记】JavaScript DOM编程艺术 （第2版）
- Android自定义view实现圆环进度条效果
- JavaScript判断数组的方法总结与推荐