Minimal Drag & Drop JavaScript Library – displace.js

Category: Drag & Drop , Javascript | December 31, 2019
Author: catc
Views Total: 924 views
Official Page: Go to website
Last Update: December 31, 2019
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,

      // Assigns a child element as the moveable handle for the parent element.
      handle: null,

      // Allows you to highlight text in inputs and textareas by disabling drag events originating from those elements.
      highlightInputs: false,

      // Callbacks
      onMouseDown: null,
      onMouseMove: null,
      onMouseUp: null,
      onTouchStart: null,
      onTouchMove: null,
      onTouchStop: null,
      // Function that can be used to override how x and y are being set on the displaced element on move.
      customMove: null


v1.4.0 (12/31/2019)

  • TypeScript support

v1.3.1 (05/27/2019)

  • Add custom move function option


  • fixed reinit method

You Might Be Interested In:

Leave a Reply