A minimal javascript library to enable moveable DOM elements.
- ~1.2kb gzipped
- supports mobile touch
- no dependencies/bloat
- IE9+
Install via npm:
npm install --save displacejs
Reference displace.min.js
and use via displace
:
// es6
import displace from 'displacejs';
// commonjs
let displace = require('displace');
// if using globally in browser
const displace = window.displacejs;
Initialize and use:
// initial
const d = displace(document.querySelector('.some-div'), options);
Creates a new displace instance with a DOM element. For options, see below.
Runs setup again. Useful when divs have been moved or resized.
Removes event listeners and destroys instance.
Constrains element to its parent container
Constrains element to the specified DOM element. Requires constrain
to be true
.
Assigns a child element as the moveable handle for the parent element.
Allows you to highlight text in inputs and textareas by disabling drag events originating from those elements.
Function that is triggered when user clicks down on moveable element.
Function that is triggered when user moves element.
Function that is triggered when user clicks up on moveable element.
Function that is triggered when initiates touch event.
Function that is triggered when moves element during touch event.
Function that is triggered when user ends touch event.
Clone the repo and npm install
. Available npm
scripts are:
- build library:
lib-build
- library development (watch src files and build on change):
lib-dev
- docs development (port 3001):
docs-dev