Daily Archives: September 2, 2020

JavaScript || Movement.js – Move, Resize, Drag & Drop Elements With The Mouse, Mobile Touch & Keyboard Using Vanilla JavaScript

The following is a module that handles dragging and resizing elements with a mouse/touch, moving elements with the keyboard via the arrow keys, and drag and dropping elements onto a drop zone.

Movement.js Source

Contents

1. Basic Usage
2. Draggable - Available Options
3. Resizable - Available Options
4. Movable - Available Options
5. Droppable - Available Options
6. Movement.js Namespace
7. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates basic usage to enable element movement.

Movement.draggable‘ makes an element draggable via the mouse/touch input. ‘Movement.resizable‘ makes an element resizable via the mouse/touch input. ‘Movement.movable‘ makes an element movable via the keyboard arrow keys. ‘Movement.droppable‘ makes an element droppable via a dropzone/allows files to be dropped to dropzone.


2. Draggable – Available Options

Movement.draggable‘ makes an element draggable via the mouse/touch input.

The options supplied to the ‘Movement.draggable‘ function is an object that is made up of the following properties.


3. Resizable – Available Options

Movement.resizable‘ makes an element resizable via the mouse/touch input.

The options supplied to the ‘Movement.resizable‘ function is an object that is made up of the following properties.


4. Movable – Available Options

Movement.movable‘ makes an element movable via the keyboard arrow keys.

The options supplied to the ‘Movement.movable‘ function is an object that is made up of the following properties.


5. Droppable – Available Options

Movement.droppable‘ makes an element droppable via a dropzone/allows files to be dropped to dropzone.

The options supplied to the ‘Movement.droppable‘ function is an object that is made up of the following properties.

Movement.droppable‘ utilizes the HTML Drag and Drop API to facilitate movement. Currently, the API only allows Mouse support.

To allow for touch support, the polyfill DragDropTouch.js is recommended to be used, which simulates the Drag and Drop API. This allows ‘Movement.droppable‘ to be supported with touch input.


6. Movement.js Namespace

The following is the Movement.js Namespace. Include this in your project to start using!


7. More Examples

Below are more example demonstrating the use of ‘Movement.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.