<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml> <pead> & Lt;meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <title>javascript Data Access test</title> </script> <script type=" text/ JavaScript > var move = {$: function (ID) {return (typeof id = = "Object")? Id:document.getElementById (ID); }, Pagex:function (elem) {//Get the X coordinate return elem.offsetparent of the target elem?//If you can continue to get the previous element, add Current offset and continues upward recursion Elem.offsetleft + This.pagex (elem.offsetparent): Elem.offsetleft; }, Pagey:function (elem) {//Get the y-coordinate of the target elem return elem.offsetparent? Elem.offsettop + This.pagex (elem.offsetparent): elem.offsettop; }, Make:function (id) {var elem = this.$ (ID); var OLDXY = null; var newxy = null; var x=0; Record initialization is the x-coordinate var y=0 of the target elem; Record initialization is target ElThe y-coordinate var t=this of em; Elem.onmouseover=function (e) {this.style.cursor= "default"; } Elem.onmousedown = function (e) {e= e | | window.event; This.style.position = "absolute"; This.style.cursor= "Move"; X=t.pagex (this); Y=t.pagey (this); var that=this; Oldxy={x:e.clientx,y:e.clienty}; Gets the coordinates of the mouse when pressed Document.onmousemove=function (e) {e= e | | window.eve nt Newxy={x:e.clientx,y:e.clienty}; Get the mouse in the moving process coordinates that.style.left= (newxy.x-oldxy.x+x) + "px"; That.style.top= (newxy.y-oldxy.y+y) + "px"; that.style.zindex= "100"; } elem.onmouseup=function (e) {this.Style.cursor= "Default"; this.style.zindex= "0"; Document.onmousemove=function (e) {//MouseMove event function return when the mouse is released; The onload = function () {Move.make ("div2"); Move.make ("Div2"); } </script> <style type= "Text/css" > #div {background: #ccc; height:30px; } #div2 {background: #f00; height:30px; width:100px; } #d {background: #ccc; } </style> </pead> <body> <div id= "Div2" >move me pls</div> </body> </ Html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Some of the more important code:
Copy Code code as follows:
var move = {
$: function (ID) {
return (typeof id = = "Object")? Id:document.getElementById (ID);
},
Pagex:function (Elem) {//Get the x-coordinate of the target Elem
Return elem.offsetparent? If you can continue to get the previous element, increase the current offset and continue to recursively
Elem.offsetleft + This.pagex (elem.offsetparent): Elem.offsetleft;
},
Pagey:function (Elem) {//Get the y-coordinate of the target Elem
Return elem.offsetparent? Elem.offsettop + This.pagex (elem.offsetparent): elem.offsettop;
},
Make:function (ID) {
var elem = this.$ (ID);
var OLDXY = null;
var newxy = null;
var x = 0; Record initialization is the x-coordinate of the target Elem
var y = 0; Record initialization is the y-coordinate of the target Elem
var t = this;
Elem.onmouseover = function (e) {
This.style.cursor = "Default";
}
Elem.onmousedown = function (e) {
E = e | | window.event;
This.style.position = "absolute";
This.style.cursor = "Move";
x = T.pagex (this);
y = T.pagey (this);
var that = this;
OLDXY = {
X:e.clientx,
Y:e.clienty
}; Gets the coordinates of the mouse when it is pressed
Document.onmousemove = function (e) {
E = e | | window.event;
Newxy = {
X:e.clientx,
Y:e.clienty
}; Gets the coordinates of the mouse during the move
That.style.left = (newxy.x-oldxy.x + x) + "px";
That.style.top = (newxy.y-oldxy.y + y) + "px";
That.style.zIndex = "100";
}
}
Elem.onmouseup = function (e) {
This.style.cursor = "Default";
This.style.zIndex = "0";
Document.onmousemove = function (e) {//Overwrite MouseMove event function while releasing mouse
Return
}
}
}
}
