html:
<!DOCTYPE html> <html> <head> <meta charset= "utf-8"> <title></title> <!--<script src="jquery-1.9.1.min.js"></script>--> <style> #drag{ background: red; width: 200px; height: 200px; cursor: move; position: fixed; top: 0; left: 0; } </style> </head> <body> <div id="drag"></div> <script src="scripts/test.js"></script> </body> </html>js:
window.onload = function(){ var drag = new Drag("drag"); drag.init(); } //获取浏览器窗口宽度 function getInner(){ var pageWidth = window.innerWidth; var pageHeight = window.innerHeight; if(typeof pageWidth != "number"){ if(document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; }else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } return {width:pageWidth,height:pageHeight}; } //构造函数 function Drag(id){ this.obj = document.getElementById("drag"); this.disx = 0; this.disy = 0; } Drag.prototype.init = function(){ //this 指针 var me = this; this.obj.||event; me.onmouseDown(e); //阻止默认事件 return false; } } Drag.prototype.onmouseDown = function(e){ //this指针 var me = this; this.disx = e.clientX - this.obj.offsetLeft; this.disy = e.clientY - this.obj.offsetTop; document.||event; me.onmouseMove(e); } document.onmouseup = function(){ me.mouseUp(); } } Drag.prototype.onmouseMove = function (e){ //this指针 var lf = e.clientX - this.disx; var tp = e.clientY - this.disy; if(lf < 0){ //防止拖曳层超出左边界 lf = 0; }else if(lf > getInner().width - this.obj.offsetWidth){ lf = getInner().width - this.obj.offsetWidth;//防止拖曳层超出右边界 } if(tp < 0){ tp = 0;//防止拖曳层超出上边界 }else if(tp > getInner().height - this.obj.offsetHeight){ tp = getInner().height - this.obj.offsetHeight;//防止拖曳层超出下边界 } this.obj.style.left = lf + 'px'; this.obj.style.top = tp + 'px'; }; Drag.prototype.mouseUp = function (){ document.onmousemove = null; document.onmouseup = null; };免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
