displace.js

A minimal javascript library for creating moveable DOM elements.

Installation and Usage

Install via npm: 
# install
$ npm install --save displacejs

// reference
import displace from 'displacejs';

If not installing via npm or using a global browser version, get the latest dist/displace.min.js script. Include it in your html and reference it via window.displacejs.



Usage is simple, just initialize with an element and any options.

const element = document.querySelector('.element')
const d = displace(element, options);

API

displace(element, options)

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.

Type: function Default: null

Demo

Basic usage
Box 1
Box 2
Box 3 Drag me

Magnifier

View code Photo by Anders Jildén

Sorting

View code

Align to grid (via customFn)

View code

Tips

When styling your moveable element, it's best to set the position of the element as absolute and disable the user-select via css:

.your-element {
    position: absolute;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

If Chrome complains about: Unable to preventDefault inside passive event listener due to target being treated as passive. Add the appropriate touch action css: 

.your-element {
    touch-action: none;
}

See this issue

Contributing

Contributing If you find any bugs, have feature requests, or would like to contribute - either send me a pull request or open a ticket and I'll do my best to follow up on it.

Developed and maintained by Catalin Covic under the MIT license.