Recently completed a Drag class to implement the Drag and drop effect of the specified object. 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
The 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:
The Code is as follows: