Instance code see:
Copy Code code as follows:
<! DOCTYPE html>
<style type= "Text/css" >
#main div{position:absolute;width:220px;height:150px;border:1px solid #999;}
</style>
<script type= "Text/javascript" >
var A;
Document.onmouseup = function () {
if (!a) return;
A = "";
};
Document.onmousemove = function (d) {
if (!a) return;
d=d| | Event
A.style.left = (d.clientx-b) + "px";
A.style.top = (d.clienty-c) + "px";
};
function $ (o, E) {
A = O;
b = E.clientx-parseint (a.style.left);
c = E.clienty-parseint (a.style.top);
}
</script>
<body>
<div id= "Main" >
<div style= "Left:100px;top:100px;background: #fc9;" onmousedown= "$ (this,event)" >1</div>
<div style= "Left:400px;top:100px;background: #9cf;" onmousedown= "$ (this,event)" >2</div>
<div style= "Left:700px;top:100px;background: #f9c;" onmousedown= "$ (this,event)" >3</div>
<div style= "Left:100px;top:300px;background: #9fc;" onmousedown= "$ (this,event)" >4</div>
<div style= "Left:400px;top:300px;background: #c9f;" onmousedown= "$ (this,event)" >5</div>
<div style= "Left:700px;top:300px;background: #cf9;" onmousedown= "$ (this,event)" >6</div>
</div>
</body>
Effect:
<! DOCTYPE html> <ptml> <pead> <style type= "Text/css" > #main Div{position:absolute;width:220px;heig ht:150px;border:1px solid #999;} </style> <script type= "Text/javascript" > var A; Document.onmouseup = function () {if (!a) return; A = ""; }; Document.onmousemove = function (d) {if (!a) return; d=d| | Event A.style.left = (d.clientx-b) + "px"; A.style.top = (d.clienty-c) + "px"; }; function $ (o, e) {a = O; b = E.clientx-parseint (a.style.left); c = E.clienty-parseint (a.style.top); } </script> </pead> <body> <div id= "main" > <div onmousedown= "$ (this,event)" >1</div& Gt <div onmousedown= "$ (this,event)" >2</div> <div onmousedown= "$ (this,event)" >3</div> <div Onmousedown= "$ (this,event)" >4</div> <div onmousedown= "$ (this,event)" >5</div> <div Onmousedown= "$ (this,event)" >6</div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Instance Code II see:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Untitled Document </title>
<style type= "Text/css" >
#test {width:200px; height:200px; background:pink; cursor:move; position:absolute; left:100px; top:100px}
</style>
<body>
<div id= "Test" ></div>
<script type= "Text/javascript" >
var Obj=document.getelementbyid ("Test");
var b;
Obj.onmousedown=function (e) {
B=true;
var divleft=parsefloat (Window.getcomputedstyle?window.getcomputedstyle (obj,null). Left:obj.currentStyle.left);
var divtop=parsefloat (Window.getcomputedstyle?window.getcomputedstyle (obj,null). Top:obj.currentStyle.top);
var e=e| | Event
var divx=e.clientx-divleft; Calculate the distance between the mouse and the Div border
var divy=e.clienty-divtop;
Document.onmousemove=function (e) {
if (b) {
var e=e| | Event Compatible IE8 and below
obj.style.left=e.clientx-divx+ "px";
obj.style.top=e.clienty-divy+ "px";
}
}
}
Document.onmouseup=function () {
B=false;
}
</script>
</body>
Effect:
<! DOCTYPE html> <ptml> <pead> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> Untitled Document </title> <style type=" Text/css "> #test {width:200px; Background:pink; Cursor:move; Position:absolute; left:100px; top:100px} </style> </pead> <body> <div id= "test" ></div> <script type= "Text/javascri PT "> var obj=document.getelementbyid (" Test "); var b; Obj.onmousedown=function (e) {b=true; var divleft=parsefloat (Window.getcomputedstyle?window.getcomputedstyle (obj,null). Left:obj.currentStyle.left); var divtop=parsefloat (Window.getcomputedstyle?window.getcomputedstyle (obj,null). Top:obj.currentStyle.top); var e=e| | Event var divx=e.clientx-divleft; Calculates the distance between mouse and div borders var divy=e.clienty-divtop; Document.onmousemove=function (e) {if (b) {var e=e| | Event Compatible IE8 and the following obj.style.left=e.clientx-divx+ "PX"; obj.style.top=e.clienty-divy+ "px"; }} document.onmouseup=function () { B=false; } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Instance code three see (drag handle):
<! DOCTYPE html> <ptml> <pead> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> Untitled Document </title> <style type=" Text/css "> *{margin:0;padding:0} #testBox { width:300px; height:300px; background:red; Position:absolute; left:0; top:0} #test {width:200px; height:200px background:pink; cursor:move; margin:30px} </style> </pead> <bo dy> <div id= "Testbox" > <div id= "Test" > is here to move </div> </div> <script type= "Text/javascrip T "> var Obj=document.getelementbyid (" Test "); var Objbox=document.getelementbyid ("Testbox"); var b; Obj.onmousedown=function (e) {b=true; var divleft=parsefloat (Window.getcomputedstyle?window.getcomputedstyle (objbox,null). Left:o BjBox.currentStyle.left); var divtop=parsefloat (Window.getcomputedstyle?window.getcomputedstyle (objbox,null). Top:objBox.currentStyle.top) ; var e=e| | Event var divx=e.clientx-divleft; Calculate the distance between the mouse and the Div border var divy=e.clienty-divtOp Document.onmousemove=function (e) {if (b) {var e=e| | Event IE8 and the following browsers have to write this sentence objbox.style.left=e.clientx-divx+ "px"; objbox.style.top=e.clienty-divy+ "px"; }} document.onmouseup=function () {b=false; } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
