Constructors

Draggable(element[, options]):

A object that can be drag with the mouse.

You have the following options, with corresponding default values:

handle (false):

Option for giving the element where starting the drag. By default it's the element itself, but you can either put a class of a subelement or the id of another element as handle.

starteffect (MochiKit.Visual.Opacity):

Function called once the drag has begun, taking the dragged element as argument. It's an effect by default but you can define any callback.

reverteffect (MochiKit.Visual.Move):

Effect applied when drag is cancelled. You have to define the revert option to enable the call. By default it brings the element back to its initial position, so you should know what you want when you modify this. The function should return an effect that can be cancelled.

endeffect (MochiKit.Visual.Opacity):

Pending part of starteffect. If you have modified your element during start, you'd usually want to revert it in the function.

zindex (1000):

Zindex of the drag element. By default it brings it to front.

revert (false):

Indicate if the reverteffect function should be called. If you define a function here, this function will be called before reverteffect, with the element as first argument.

snap (false):

Define the behaviour of the drag element when moving. It can either be a function, a value or an array of two values. If it's a function, it should take the (x, y) position of the element as arguments, and return the position draw in the browser. If its a value, it's used as a modulo for each coordinates. If it's an array, each value is applied for the corresponding coordinate.

selectclass (null):

If defined, name of CSS class applied during the drag.

ghosting (null):

Make a ghost from the draggable: clone it at start, then remove the clone at end.

onchange  (MochiKit.Base.noop):

Function called when updates are made on the draggable object.

scroll (false):

Element to scroll around, if precised. For example, window will allow the draggable to scroll in the page.

scrollSensitivity (20):

Scroll sensitivity, used when scroll is used.

scrollSpeed (15):

Scroll speed, used when scroll is used.

A draggable generates some signals during its lifetime: start, drag and end. They are available through the Draggables handler, and are called with a draggable as argument. You can register a callback for these events like this:

onStart = function (draggable) {
    // Do some stuff
};

connect(Draggables, 'start', onStart);

Availability:

Available in MochiKit 1.4+

Droppable(element[, options]):

A object where you can drop a draggable.

You have the following options, with corresponding default values:

greedy (true):

Stop on this droppable when a draggable drops over it.

hoverclass (null):

If defined, name of CSS class applied when a draggable is hover the droppable element (hover state).

hoverfunc (MochiKit.Base.noop):

Function called on hover state.

accept (null):

Array of CSS classes allowed to drop on this.

activeclass (null):

If defined, name of CSS class applied if a possible draggable begins its start (active state).

onactive (MochiKit.Base.noop):

Function called on active state.

containment ([]):

Specify a list of elements to check for active state: only the children of the specified elements can be dropped. Mainly useful for Sortable.

onhover (MochiKit.Base.noop):

Specific hover function, mainly used for Sortable.

ondrop (MochiKit.Base.noop):

Function called when a draggable is dropped. The function takes three arguments: the draggable element, the droppable element, and the event that raised the drop.

Availability:

Available in MochiKit 1.4+