This is a very simple class, only implemented drag-and-drop functionality, of course, the code has kept the original simplicity, the following is the class library code:
Code
Copy Code code as follows:
/**************************************************
* Drag.js
* Author: Oak Cottage 07.17.2010
* HTTP://WWW.CNBLOGS.COM/BABYZONE2004/
* Usage: Drag.initdrag (ID); ID is the ID name of the label
**************************************************/
var drag={
Dragobject:null,
Mouseoffset:null,
Initdrag:function (item) {
if (item) {
This.item=document.getelementbyid (item);
This.item.onmousedown=function (evnt) {
Document.onmousemove=drag.mousemove;
Document.onmouseup=drag.mouseup;
Drag.dragobject=this;
Drag.mouseoffset=drag.getmouseoffset (this,evnt);
return false;
}
}
},
Mousepoint:function (x,y) {
This.x=x;
This.y=y;
},
Mouseposition:function (evnt) {
evnt=evnt| | window.event;
var x=parseint (EVNT.CLIENTX);
var y=parseint (Evnt.clienty);
return new Drag.mousepoint (x,y);
},
Getmouseoffset:function (target,evnt) {
var mousepos=drag.mouseposition (evnt);
var x=mousepos.x-target.offsetleft;
var y=mousepos.y-target.offsettop;
return new Drag.mousepoint (x,y);
},
Mouseup:function (evnt) {
Drag.dragobject=null;
Document.onmousemove = null;
Document.onmouseup = null;
},
Mousemove:function (evnt) {
if (! Drag.dragobject) return;
var mousepos=drag.mouseposition (evnt);
drag.dragobject.style.position= "Absolute";
drag.dragobject.style.top=mousepos.y-drag.mouseoffset.y+ "px";
drag.dragobject.style.left=mousepos.x-drag.mouseoffset.x+ "px";
return false;
}
}
Because the code is not very complex, so do not start in detail. There is a need to download the use directly, after import with the Drag.initdrag (ID name) method can be applied.
In fact, there is already a lightweight Dom-drag class library on the Internet (author: Aaron Boodman), looking back at the class library he wrote, the inside cow face ..., Dom-drag class can go to http://boring.youngpup.net/projects/ dom-drag/downloads, the code is very simple, and provides a lot of easy-to-use features. And a very detailed example is provided on the website.
This class library is like the StartDrag method in Flash, the code is concise but functional. You want a component to be able to drag, you can call the Drag.init () method.
Init:function (o, Oroot, MinX, MaxX, Miny, Maxy, Bswaphorzref, Bswapvertref, Fxmapper, Fymapper)
O: is to realistic mouse drag components;
Oroot: is an O-upper component that will be dragged along with the O;
MinX, MaxX, Miny, Maxy: Set the mouse to drag the range, from the following example cropper can be seen, if there is a oroot, that range is by oroot relative to the page;
Bswaphorzref, Bswapvertref: Sets the priority of the component;
Fxmapper, Fymapper: Setting the path to drag
A third example:
Example Link: http://boring.youngpup.net/projects/dom-drag/ex3.html
You can implement a limit on the drag range, as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script language= "javascript" src= "Dom-drag.js" ></script>
<style type= "Text/css" >
#thumb {
Position:absolute;
height:50px;
width:12px;
Background-color: #eee;
border:1px outset #eee;
}
</style>
<body>
<div id= "thumb" style= "left:25px; top:25px; " ></div>
<script language= "JavaScript" >
var athumb = document.getElementById ("thumb");
Drag.init (Athumb, FF; " >null, 25, 25, 25, 200);
</script>
</body>
<script language= "JavaScript" >
var athumb = document.getElementById ("thumb");
Drag.init (Athumb, NULL, 25, 25, 25, 200);
</script>
The 4 numeric parameters in init correspond to the areas that the elements can drag, the x,y coordinates of the upper left and lower right. So the element can only slide between (25,25), (25,200) lines, like a scroll bar.
This class library features simple, but if combined with other features, will be able to make a flash like the effect of dazzling.
Demo Code: http://demo.jb51.net/js/dom-drag/demo.html
Code Packaging: http://www.jb51.net/jiaoben/28492.html
