Drag.js

Contains Classes Drag.Base, Drag.Move and a couple of element methods to drag and resize your elements.

Dependencies

Moo.js, Function.js, Array.js, String.js, Element.js

Author

Valerio Proietti, http://mad4milk.net

License

MIT-style license.

Summary
Drag.js Contains Classes Drag.Base, Drag.Move and a couple of element methods to drag and resize your elements.
Drag.Base Modify two css properties of an element based on the position of the mouse.
Drag.Move Extends Drag.Base, has additional functionality for dragging an element (modifying its left and top values).
Element Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties
makeDraggable Makes an element draggable with the supplied options.
makeResizable Makes an element resizable (by dragging) with the supplied options.
getPosition Returns an object with width, height, left, right, top, and bottom, representing the values of the Element

Drag.Base

Modify two css properties of an element based on the position of the mouse.

Arguments

el the $(element) to apply the transformations to.
xModifier required.  The css property to modify, based to the position on the X axis of the mouse. defaults to none.
yModifier required.  The css property to modify, based to the position on the Y axis of the mouse pointer. defaults to none.
options optional.  The options object.

Options

handle the $(element) to act as the handle for the draggable element. defaults to the $(element) itself.
onStart function to execute when the user starts to drag (on mousedown); optional.
onComplete optional, function to execute when the user completes the drag.
onDrag optional, function to execute at every step of the dragged $(element).
xMax optional, the maximum value for the x property of the dragged $(element).
xMin optional, the minium value for the x property of the dragged $(element).
yMax optional, the maximum value for the y property of the dragged $(element).
yMin optional, the minium value for the y property of the dragged $(element).

Drag.Move

Extends Drag.Base, has additional functionality for dragging an element (modifying its left and top values).

Arguments

el the $(element) to apply the transformations to.
options optional.  The options object.

Options

all the drag.Base options, plus: snap - if true the element will start dragging after a certain distance has been reached from the mousedown. defaults to true. snapDistance - integer representing the snapping distance.  Default is 8. onSnap - function to execute when the element has been dragged the snapDistance. xModifier - the modifier to handle left and right dragging; defaults to left. yModifier - the modifier to handle up and down dragging; defaults to top. container - if set to an element will fill automatically xMin/xMax/yMin/yMax based on the $(element) size and position. defaults to false.

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties
makeDraggable Makes an element draggable with the supplied options.
makeResizable Makes an element resizable (by dragging) with the supplied options.
getPosition Returns an object with width, height, left, right, top, and bottom, representing the values of the Element

Properties

makeDraggable

Makes an element draggable with the supplied options.

Arguments

options see Drag.Move and Drag.Base for acceptable options.

makeResizable

Makes an element resizable (by dragging) with the supplied options.

Arguments

options see Drag.Base for acceptable options.

getPosition

Returns an object with width, height, left, right, top, and bottom, representing the values of the Element

Example

var myValues = $('myElement').getPosition();
//myValues will be..
{
width: 200,
height: 300,
left: 100,
top: 50,
right: 300,
bottom: 350
}
Modify two css properties of an element based on the position of the mouse.
function $( el )
returns the element passed in with all the Element prototypes applied.
My Object Oriented javascript.
Contains Function prototypes, utility functions and Chain.
function $A( array )
Copy the array and returns it.
Same as Array.copy, but as function.
Contains Array prototypes and the function $A;
Contains String prototypes and Number prototypes.
Contains useful Element prototypes, to be used with the dollar function $.
Extends <Drag.Base>, has additional functionality for dragging an element (modifying its left and top values).