Drag

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.

Here is the documentation for Drag.Base.js.

There are a couple of ways to make a draggable object. The easiest is using the extension to the Element object so I'll start there just to get things rolling:

$('fxTarget').makeDraggable()

That's it. You're done. Now, if you want to do things like capture the location of the object when the user drops it (and then maybe send that info back to the server via ajax so you can remember its location for another visit), you can specify a bunch of additional options.

$('fxTarget').makeDraggable({
	onStart: function() {
	console.log("start left: %s, top: %s", this.getLeft(), this.getTop());
	}.bind($('fxTarget')),
	onDrag: function() {
	console.log("drag start left: %s, top: %s", this.getLeft(), this.getTop());
	}.bind($('fxTarget'))
});

There's more stuff you can add here like snapping, and container so that you can drag an element only within the confines of another. Snap let's you require the user to drag the element a certain distance before it starts to follow the mouse (the default is 6px).

$('dragExample').makeDraggable({
	snap: 25,
	container: 'snapContainer'
});

There are other ways to make things draggable. Drag.Base 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). You probably won't use Drag.Base directly, but you might want to extend it to make a new effect.

These are the options that Drag.Base takes:

Arguments:

el

the $(element) to apply the transformations to.

options

optional. The options object.

handle

the $(element) to act as the handle for the draggable element. defaults to the $(element) itself.

modifiers

an object. see Modifiers Below.

onStart

optional, function to execute when the user starts to drag (on mousedown);

onComplete

optional, function to execute when the user completes the drag.

onDrag

optional, function to execute at every step of the drag

limit

an object, see Limit below.

snap

optional, the distance you have to drag before the element starts to respond to the drag. defaults to 6

modifiers:

x

string, the style you want to modify when the mouse moves in an horizontal direction. defaults to 'left'

y

string, the style you want to modify when the mouse moves in a vertical direction. defaults to 'top'

limit:

x

array with start and end limit relative to modifiers.x

y

array with start and end limit relative to modifiers.y

Here is the documentation for Drag.Move.js.

Drag.Move works pretty much the same as Element.makeDraggable:

new Drag.Move($('fxTarget'), {});

That's exactly the same as the first example above; the syntax above is pretty much just a shortcut for Drag.Move.

If you want to keep a handle on the instance of the Drag.Move class so you can interact with it (for instance, to disable dragging at a later point), you can do so with either syntax:

var myDraggable = new Drag.Move($(element), {options...});
var myDraggable = $(element).makeDraggable({options...});

Pretty self explanatory I think. Here you go:

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

Resizable takes as options the same thing as Drag.Base. This will make a little more sense if you just look at what makeResizable does:

makeResizable: function(options){
	return new Drag.Base(this, Object.extend(options || {}, {modifiers: {x: 'width', y: 'height'}}));
}

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*/
});