// The element identified by 'myDOMElement' will be draggable by the user.
var draggable = new UI.Draggable('myDOMElement');
// The element identified by 'foo' will be draggable by the user only on the
// X axis.
var draggable = new UI.Draggable('foo', UI.Draggable.DRAG_X);
//The element identified by 'bar' will by draggable as long the specified
//limits are not surpased.
var draggable = new UI.Draggable('foo', null, [0, 100], [0, 200]);
UI.Draggable is a DOM element wrapper, featuring limited drag and drop features.
By now, UI.Draggable just makes a DOM element draggable by the user. Optionally you can limit the drag capability to just an axis, or jail the element in a box.
TODO: Full D&D features including drop targets and auto 'rollback' when the draggable is not dropped in any sensible location.
UI.Draggable(element, flags=DRAG_X | DRAG_Y, leftLimits=null, topLimits=null)
Creates a new Draggable object. The draggable will wrap the element element, making it draggable to anywhere by default. element can be an string.
flags, leftLimits and topLimits is the initial value for the UI.Draggable.prototype.flags, UI.Draggable.prototype.leftLimits and UI.Draggable.prototype.topLimits properties.
UI.Draggable.prototype.element:
The DOM element wrapped by the Draggable. (Read-only).
UI.Draggable.prototype.elementToMove:
The DOM element moved when UI.Draggable.prototype.element is dragged.
Bit-field value, controls some draggable behaviour, such as the axis where the drag is limited. (See UI.Draggable.DRAG_X, UI.Draggable.DRAG_Y).
UI.Draggable.prototype.leftLimits:
Two-element array containing lower and higher limits for this.element.style.left. If null, no limits will apply in the x axis. Note: What this limits means in practice depends on the value of this.element.style.position.
UI.Draggable.prototype.topLimits:
Analogue to UI.Draggable.prototype.leftLimits, for the y axis.
UI.Draggable.prototype.dragStarted:
Fired when the drag is started (mousedown over element or when UI.Draggable.prototype.start() is invoked). It doesn't imply that the element has been moved yet.
UI.Draggable.prototype.dragFinished:
Fired when the drag ends (mouseup over element or when UI.Draggable.prototype.stop() is invoked). It doesn't imply that the element was moved between the start and the end.
UI.Draggable.prototype.dragging:
Fired when the element is being dragged (mousemove over element after mousedown and before mouseup, or when UI.Draggable.prototype.move() is invoked.
Be careful when connecting to this signal, it can fire many times on short intervals, and doing something cpu intensive can become the draggable unusable.
UI.Draggable.DRAG_X, UI.Draggable.DRAG_Y:
Bit-flag for the UI.Draggable.prototype.flag property. When on, the draggable allows movement on the specified axis.
UI.Draggable.prototype.startFromEvent(event):
Calls UI.Draggable.prototype.start(x, y) using the mouse coordinates contained on the DOM event event.
UI.Draggable.prototype.start(refX, refY):
Usually called from the automatically installed onmousedown handler, this method starts the element drag. refX and refY are just the reference points where the drag starts.
UI.Draggable.prototype.move(x, y):
Usually called from the autocatically installed onmousemove handler, this method move the element by (refX - x, refY - y) pixels, where refX and refY are the values passed to UI.Draggable.prototype.start(refX, refY).
UI.Draggable.prototype.stop():
Usually called from the automatically installed onmouseup handler. Stops the drag.
UI.Draggable.prototype.enable():
Enables the draggable (By default, the draggable is enabled).
UI.Draggable.prototype.disable():
Disables the draggable. Once disabled, the UI.Draggable.prototype.start(refX, refY) and UI.Draggable.prototype.move(x, y) will have no effect.
Copyright 2005-2006 Leonardo Soto M. <leo.soto@gmail.com> and Imagemaker IT <http://www.imagemaker.cl>.
This program is licensed under the CDDL v1.0 license, see http://www.sun.com/cddl/cddl.html.