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.
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('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. |