v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Drag drag.js

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

Page Contents

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 (jQuery style) for the element where dragging is allow to begin.

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

Methods #

.CFW_Drag(options) #

Activates the equalizer widget. Accepts an optional options object.

.CFW_Drag('dispose') #

Disables the drag functionality.

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..
offsetY The moved vertical position of the drag "target" element.