Author: | catc |
---|---|
Views Total: | 984 views |
Official Page: | Go to website |
Last Update: | December 31, 2019 |
License: | MIT |
Preview:

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.4.0 (12/31/2019)
- TypeScript support
v1.3.1 (05/27/2019)
- Add custom move function option
09/12/2018
- fixed reinit method