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
      
});

Changelog:

v1.4.0 (12/31/2019)

• TypeScript support

v1.3.1 (05/27/2019)

• Add custom move function option

09/12/2018

• fixed reinit method