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 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);
});