作为一个马上要找工作、非计算机专业、热爱前端的大四狗,最近开始疯狂写demo、看书,准备九、十月份的校招。
晚上用js实现了一个比较简单(low)的拖拽效果,初步测试兼容性还是不错的,于是写一段小博文记录下~大神求轻喷
面向过程的写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { 100px; height: 100px; background: red; position: absolute; } </style> </head> <body> <div id="box"></div> <script> window.onload = function (){ var disX = 0; var disY = 0; var oBox = document.getElementById("box"); oBox.onmousedown = function (ev){ var oEvent = ev || event; oBox.style.cursor = "move"; disX = oEvent.clientX - oBox.offsetLeft; disY = oEvent.clientY - oBox.offsetTop; document.onmousemove = function (ev){ var oEvent = ev || event; var theLeft = oEvent.clientX - disX; var theTop = oEvent.clientY - disY; // 禁止用户从浏览器左框拖出 if (theLeft < 0) { theLeft = 0; } else if (theLeft > document.documentElement.clientWidth- oBox.offsetWidth) { theLeft = document.documentElement.clientWidth- oBox.offsetWidth; } else if (theTop < 0) { theTop = 0; } else if (theTop > document.documentElement.clientHeight- oBox.offsetHeight) { theTop = document.documentElement.clientHeight- oBox.offsetHeight; } oBox.style.left = theLeft + 'px'; oBox.style.top = theTop + 'px'; } } document.onmouseup = function (){ document.onmousemove =null; } // 窗口重设大小时的处理方法 window.onresize = function (){ oBox.style.left = document.documentElement.clientWidth/2-oBox.offsetWidth/2 + 'px'; oBox.style.top = document.documentElement.clientHeight/2-oBox.offsetHeight/2 + 'px'; } // 兼容firefox 3.6.19 return false; } </script> </body> </html>
创建一个拖拽对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box,#box2 { 100px; height: 100px; background: red; position: absolute; } </style> </head> <body> <div id="box"></div> <div id="box2"></div> <script> window.onload = function (){ new Drag("box"); new Drag("box2"); } function Drag(id){ var _this = this; this.disX = 0; this.disY = 0; this.oBox = document.getElementById(id); this.oBox.onmousedown = function (ev){ _this.fnDown(ev); // 兼容firefox 3.6.19 return false; }; document.onmouseup = function (){ _this.fnUp(); } window.onresize = function (){ _this.fnResize(); }; // 兼容firefox 3.6.19 return false; } Drag.prototype.fnDown = function(ev){ var oEvent = ev || event; var _this = this; this.oBox.style.cursor = "move"; this.disX = oEvent.clientX - this.oBox.offsetLeft; this.disY = oEvent.clientY - this.oBox.offsetTop; document.onmousemove = function (ev){ _this.fnMove(ev); }; } Drag.prototype.fnMove = function(ev){ var oEvent = ev || event; var theLeft = oEvent.clientX - this.disX; var theTop = oEvent.clientY - this.disY; // 禁止用户从浏览器左框拖出 if (theLeft < 0) { theLeft = 0; } else if (theLeft > document.documentElement.clientWidth- this.oBox.offsetWidth) { theLeft = document.documentElement.clientWidth- this.oBox.offsetWidth; } if (theTop < 0) { theTop = 0; } else if (theTop > document.documentElement.clientHeight- this.oBox.offsetHeight) { theTop = document.documentElement.clientHeight- this.oBox.offsetHeight; } this.oBox.style.left = theLeft + 'px'; this.oBox.style.top = theTop + 'px'; } Drag.prototype.fnUp = function (){ document.onmousemove =null; } Drag.prototype.fnResize = function(){ this.oBox.style.left = document.documentElement.clientWidth/2-this.oBox.offsetWidth/2 + 'px'; this.oBox.style.top = document.documentElement.clientHeight/2-this.oBox.offsetHeight/2 + 'px'; } </script> </body> </html>