标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> #div1 { width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body> <div id="div1"></div> <script> // var oDiv1 = document.getElementById("div1"); // oDiv1.onmousedown = function(event) { // var disX = event.clientX - oDiv1.offsetLeft; // var disY = event.clientY - oDiv1.offsetTop; // document.onmousemove = function(event) { // oDiv1.style.left = event.clientX - disX + "px"; // oDiv1.style.top = event.clientY - disY + "px"; // } // document.onmouseup = function() { // document.onmousemove = null; // document.onmouseup = null; // } // } function Drag(id){ this.obj=document.getElementById(id); } Drag.prototype.init=function(){ var This=this; this.obj.onmousedown=function(event){ This.down(event); document.onmousemove =function(event){ This.move(event) } document.onmouseup = function() { This.up() } return false; } } Drag.prototype.down=function(event){ this.disX=event.clientX - this.obj.offsetLeft; this.disY=event.clientY - this.obj.offsetTop; } Drag.prototype.move=function(event){ this.obj.style.left = event.clientX - this.disX + "px"; this.obj.style.top = event.clientY - this.disY + "px"; } Drag.prototype.up=function(event){ document.onmousemove = null; document.onmouseup = null; } var drag1=new Drag("div1") drag1.init(); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/liujin0505/p/4437514.html
