Drag

UI provides Element#enableDrag method that allow elements to fire drag-related events.

Events fired

• drag:started : fired when a drag is started (mousedown then mousemove)
• drag:updated : fired when a drag is updated (mousemove)
• drag:ended : fired when a drag is ended (mouseup)

Notice it doesn’t actually move anything, drag behavior has to be implemented by attaching handlers to drag events.

Drag-related informations

event.memo contains useful information about the drag occuring:

• dx : difference between pointer x position when drag started and actual x position
• dy : difference between pointer y position when drag started and actual y position
• mouseEvent : the original mouse event, useful to know pointer absolute position, or if key were pressed.

Example, with event handling for a specific element

// Now "resizable" will fire drag-related events
$('resizable').enableDrag();

// Let's observe them
$('resizable').observe('drag:started', function(event) {
  this._dimensions = this.getDimensions();
}).observe('drag:updated', function(event) {
  var drag = event.memo;

  this.setStyle({
    width:  this._dimensions.width  + drag.dx + 'px',
    height: this._dimensions.height + drag.dy + 'px'
  });
});

Example, with event delegating on the whole document

// All elements in the having the "draggable" class name will fire drag events.
$$('.draggable').invoke('enableDrag');

document.observe('drag:started', function(event) {
  UI.logger.info('trying to drag ' + event.element().id);
}):