拖拽效果
在JavaScript中实现拖拽的基本步骤如下：
- 给需要拖拽的元素添加鼠标按下事件监听器 在鼠标按下事件的处理函数中，记录鼠标按下时的初始位置和被拖拽元素的初始位置。
- 给document对象添加鼠标移动事件监听器和鼠标释放事件监听器 在鼠标移动事件的处理函数中，计算鼠标移动的距离，并更新被拖拽元素的位置。
- 在鼠标释放事件的处理函数中，移除鼠标移动和鼠标释放事件的监听器。
以下是拖拽效果实现步骤
- 创建主页面html
<!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> <style> #father{ width: 100px; height: 100px; background: red; position: absolute; } #son{ width: 100px; height: 100px; background: green; position: absolute; left: 110px; } </style> </head> <body> <div id="father">father</div> <div id="son">son</div> <script src="js/drag.js"></script> <script src="js/subdrag.js"></script> <script> new Drag('#father'); new Subdrag('#son'); </script> </body> </html>
- 拖拽js功能实现
class Drag{ constructor(selector){ //获取拖拽的对象 this.ele = document.querySelector(selector); //添加事件 this.ele.onmousedown = function(evt){ //this: 原来指向了ele对象，这里需要一个实例对象 this.fnDown(evt); }.bind(this); } fnDown(evt){ let e = evt || window.event; //求鼠标的相对坐标值 this.dis_x = e.offsetX; this.dis_y = e.offsetY; //移动事件 document.onmousemove = function(evt){ //this: document this.fnMove(evt); }.bind(this); //鼠标抬起事件 document.onmouseup = this.fnUp; //取消默认行为 document.ondragstart = function(){ return false; } } fnMove(evt){ let e = evt || window.event; this.ele.style.left = e.pageX - this.dis_x + 'px'; this.ele.style.top = e.pageY - this.dis_y + 'px'; } fnUp(){ document.onmousemove = null; } }
- js模块设置边界
class Subdrag extends Drag{ constructor(selector){ //调用父类的构造函数 super(selector); } fnMove(evt){ let e = evt || window.event; let left = e.pageX - this.dis_x; let top = e.pageY - this.dis_y; //设置边界 if(left <= 0){ left = 0; }else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){ left = document.documentElement.clientWidth - this.ele.offsetWidth; } if(top <= 0){ top = 0; }else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){ top = document.documentElement.clientHeight - this.ele.offsetHeight; } this.ele.style.left = left + 'px'; this.ele.style.top = top + 'px'; } }
