Instantiates new displace instance on a DOM element.

Methods

displace.reinit()

Runs setup again. Useful when divs have been changed or resized.

displace.destroy()

Removes event listeners and destroys instance.

Options

options.constrain

Constrains element to its parent container.

Type: boolean Default: false

options.relativeTo

Constrains element to the specified dome element. Requires options.constrain to be true .

Type: DOM element Default: null

options.handle

Assigns a child element as the moveable handle for the parent element.

Type: DOM element Default: null

options.highlightInputs

Allows you to highlight text in inputs and textareas by disabling drag events originating from those elements.

Type: boolean Default: false

options.ignoreFn

Function that allows you to prevent dragging from an event. If the function returns true, the event will be ignored. Function called with: (event)

Type: function Default: null

options.customMove

Function that overrides how x and y are being set on the displaced element as it's moved. Function called with: (element, newX, newY)

Type: function Default: null

Events

Event triggered functions are called with two arguments: the DOM element being triggered and the original event.

options.onMouseDown

Function that is triggered when the DOM element is clicked.

Type: function Default: null

options.onMouseMove

Function that is triggered when the DOM element is being moved.

Type: function Default: null

options.onMouseUp

Function that is triggered when user mouse-ups the moveable DOM element.

Type: function Default: null

options.onTouchStart

Function that is triggered when user initiates a touch start events on element.

Type: function Default: null

options.onTouchMove

Function that is triggered when user moves the element via touch event.

Type: function Default: null

options.onTouchStop

Function that is triggered when user ends touch event.