This is a very simple function class. It only implements the drag-and-drop function. Of course, the Code also keeps the original conciseness. below is the code of this Class Library:
Code
Copy codeThe Code is as follows:
/*************************************** ***********
* Drag. js
* Author: oak hut 07.17.2010
* Http://www.cnblogs.com/babyzone2004/
* Usage: Drag. initDrag (id); id is the id of the tag
**************************************** **********/
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, I will not discuss it in detail. If necessary, you can download and use it directly. After the import, you can use the Drag. initDrag (id name) method to apply it.
As a matter of fact, there is already a lightweight dom-drag class library (by Aaron Boodman) on the Internet. I can see my own class library, and I can see it inside ......, The dom-drag class can be. The website provides detailed examples.
This class library is like the startDrag method in flash, and the code is concise but practical. You can call the Drag. init () method to move a widget.
Init: function (o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
O: a component that allows you to drag the mouse;
ORoot: The component at the upper layer of o, which will be dragged along with o;
MinX, maxX, minY, and maxY: Set the range of mouse dragging. The cropper example below shows that if oRoot exists, the range is from oRoot to page;
BSwapHorzRef, bSwapVertRef: sets the priority of a component;
FXMapper and fYMapper: Set the drag path.
The third example is as follows:
Example link: http://boring.youngpup.net/projects/dom-drag/ex3.html
The following code limits the drag range:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Html>
<Head>
<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>
</Head>
<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>
</Html>
<Script language = "javascript">
Var aThumb = document. getElementById ("thumb ");
Drag. init (aThumb, null, 25, 25, 25,200 );
</Script>
The four numeric parameters in init correspond to the area where the elements can be dragged, with the x and y coordinates on the left and right. Therefore, elements can only slide between (25,200) and () straight lines, just like the scroll bar.
This class library has simple functions, but with other functions, it can be as dazzling as flash.
DEMO code: http://demo.jb51.net/js/dom-drag/demo.html
Code packaging: http://www.jb51.net/jiaoben/28492.html