Drag Base Class

Here is the documentation for Drag.js.

MooTools lets you make objects draggable and it's super easy. Doing it well takes a bit more work, but the code that just handles the dragging itself is pretty much all done for you.

Drag is a little lower level and lets you alter any two properties when the user clicks and moves the mouse (drags). It's used for moving and also, for instance, for resizing (by altering width and height).

These are the options that Drag takes:

Arguments:

element

the element to apply the transformations to.

options

optional. The options object.

grid

(integer: defaults to false) Distance in pixels for snap-to-grid dragging.

handle

(element: defaults to the element passed in) The Element to act as the handle for the draggable element.

invert

(boolean: defaults to false) Whether or not to invert the values reported on start and drag.

limit

(object: defaults to false) An object with x and y properties used to limit the movement of the Element.

modifiers

(object: defaults to {'x': 'left', 'y': 'top'}) An object with x and y properties used to indicate the CSS modifiers (i.e. 'left').

snap

(integer: defaults to 6) The distance to drag before the Element starts to respond to the drag.

style

(boolean: defaults to true) Whether or not to set the modifier as a style property of the element.

unit

(string: defaults to 'px') A string indicating the CSS unit to append to all integer values.

beforeStart

Executed before the Drag instance attaches the events. Receives the dragged element as an argument.

start

Executed when the user starts to drag (on mousedown). Receives the dragged element as an argument.

snap

Executed when the user has dragged past the snap option. Receives the dragged element as an argument.

drag

Executed on every step of the drag. Receives the dragged element as an argument.

complete

Executed when the user completes the drag. Receives the dragged element as an argument.

Pretty self explanatory I think. Here you go:

$('resizeExampleContainer').makeResizable({
	handle: 'resizeExampleHandle'
});

Here's an example where we limit sizing to one dimension (height):

$('resizeExampleContainerLimited').makeResizable({
	handle: 'resizeExampleHandleLimited',
	modifiers:{x: false, y:'height'} /*limit the sizing to vertical*/
});