Drag drag.js

A simple widget that allows for both mouse and touch drag handling for use by other Figuration widgets.

Examples

An example can be found with the draggable popover on the Popover widget page.

Disabled

If the element on which the drag widget is attached to is disabled either by .disabled or :disabled then the dragStart action will not occur. The same is true if a handle is defined, and the handle is marked as disabled.

Usage

Via JavaScript

Call the widget manually with options:

$('#myDrag').CFW_Drag({
handle : '#myDragHandle'
});

Options

Options can be passed via JavaScript.

Name Type Default Description
handle string null

The selector for the element where dragging is allow to begin.

The handle must be a descendant of the element where the drag is attached.

$('#myDrag').CFW_Drag({
handle: '#myDragHandle'
});

Methods

Method calls should be made on the drag element.

Method Name Description
dispose Disables the drag functionality.
$('#myDrag').CFW_Drag('dispose');

Events

Event callbacks happen on the item where the drag is attached.

Event Type Description
init.cfw.drag This event fires after the drag widget is initialized.
dragStart.cfw.drag This event fires when the drag item or handle is activated.
drag.cfw.drag This event fires as the item is being moved.
dragEnd.cfw.drag This event fires when the drag item or handle is released.
$('#myDrag').on('drag.cfw.drag', function() {
// do something...
});

Event Properties

Each event callback, except for init.cfw.drag, returns the following additional properties.

Name Description
startX The horizontal location of the dragStart.cfw.drag event.
startY The vertical location of the dragStart.cfw.drag event.
pageX The horizontal location of the drag.cfw.drag event.
pageY The vertical location of the drag.cfw.drag event.
deltaX The horizontal distance moved from startX.
deltaY The vertical distance moved from startX.
originalX The starting horizontal position of the drag "target" element..
originalY The starting vertical position of the drag "target" element.
offsetX The moved horizontal position of the drag "target" element, the sum of originalX and deltaX.
offsetY The moved vertical position of the drag "target" element, the sum of originalY and deltaY.
$('#myDrag').on('drag.cfw.drag', function(event) {
someFunction(event.offsetY, event.offsetX);
});