Minimal Drag & Drop JavaScript Library – displace.js

Category: Drag & Drop , Javascript | May 27, 2019
Author: catc
Views Total: 4,010
Official Page: Go to website
Last Update: May 27, 2019
License: MIT

Preview:

Minimal Drag & Drop JavaScript Library – displace.js

Description:

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.3.1 (05/27/2019)

  • Add custom move function option

09/12/2018

  • fixed reinit method

You Might Be Interested In:


Leave a Reply