Minimal Drag & Drop JavaScript Library – displace.js

Category: Drag & Drop , Javascript | September 15, 2016
Author: catc
Views Total: 1,044
Official Page: Go to website
Last Update: September 15, 2016
License: MIT


Minimal Drag & Drop JavaScript Library – displace.js


displace.js is a lightweight yet configurable JavaScript library used to create movable elements with drag and drop support.

How to use it:

Import the displace into your web project.

// commonjs
let displace = require('displace');

// es6
import displace from 'dist/displace.min.js';

Or include the displace.min.js script directly on the webpage.

<script src="displace.min.js"></script>

Make a specific element movable as this:

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

Possible options and callback functions with default values.

const demo = displace(element, {

      // Constrains element to its parent container.
      constrain: false,

      // Constrains element to the specified dome element.
      relativeTo: null,

      // Callbacks
      onMouseDown: null,
      onMouseMove: null,
      onMouseUp: null