# 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).