Minimal javascript library for creating movable DOM elements
A minimal javascript library to enable moveable DOM elements.
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);
displace(element, options)
Creates a new displace instance with a DOM element. For options, see below.
reinit()
Runs setup again. Useful when divs have been moved or resized.
displace.destroy()
Removes event listeners and destroys instance.
constrain
Constrains element to its parent container
false
relativeTo
Constrains element to the specified DOM element. Requires constrain
to be true
.
null
handle
Assigns a child element as the moveable handle for the parent element.
null
highlightInputs
Allows you to highlight text in inputs and textareas by disabling drag events originating from those elements.
false
ignoreFn
Function that allows you to prevent dragging from an event. If the function returns true, the event will be ignored.
null
onMouseDown
Function that is triggered when user clicks down on moveable element.
null
onMouseMove
Function that is triggered when user moves element.
null
onMouseUp
Function that is triggered when user clicks up on moveable element.
null
onTouchStart
Function that is triggered when initiates touch event.
null
onTouchMove
Function that is triggered when moves element during touch event.
null
onTouchStop
Function that is triggered when user ends touch event.
null
customMove
Function that can be used to override how x and y are being set on the displaced element on move.
null
Clone the repo and npm install
. Available npm
scripts are:
lib-build
lib-dev
docs-dev