Skip to main content
Figuration v3 Preview Available!
Widgets

Bring interactivity to your site with a selection of jQuery widgets (plugins) all built with accessibility and usability in mind.

Drag drag.js

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

Contents

Examples

Working examples can be found on the Slider widget page, and at the draggable example on the Popover widget page.

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 integer 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('destroy')

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.