A js drag effect class and dom-drag.js analysis _ javascript skills

Source: Internet
Author: User
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:






Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.