Create Draggable Elements With Momentum/Kinetic Effect – Momentum.js

Preview:

Description:

Momentum.js is a JavaScript draggable library to help create natural-feeling drag motion for any element within the document. Works across desktop, mobile, and touch devices.

The library enables you to add a momentum(Kinetic) effect to draggable elements. After the user stops dragging an element, instead of abruptly stopping, the element continues to move and gradually slows down, mimicking real-world physics.

How to use it:

1. Install and import the Momentum.

# NPM
$ npm i momentum.js

import { Draggable, Handler, Rotatable } from 'momentum.js';

<script src="/dist/momentum.min.js"></script>

2. Add your draggable element to the page.

<div class="drag-container">
  <div class="drag-element">
    <img src="1.jpg" draggable="false">
  </div>
</div>

3. Initialize the Momentum/Kinetic Effect on the draggable element.

var containerElement = document.querySelector('.drag-container');
var dragElement = containerElement.querySelector('.drag-element');
var dragger = new momentum.Draggable(dragElement, {
    container: containerElement,
    elementBounds: 'container',
});

4. Available options to customize the Momentum/Kinetic effect.

var dragger = new momentum.Draggable(dragElement, {
    // Container of the draggable element. Also the target for the "drag events"
    container: null,
    // Determines if the bounds of a element should be used. 
    // As a shortcut you can pass 'container' or 'parent' as a string
    elementBounds: null,
    // Sets the bounds manually {x: number y: number, width: number, height: number}
    bounds: null,
    // Determines if the anchor should be set on the start position the user has clicked
    autoAnchor: false,
    // Anchor points
    anchorX: .5,
    anchorY .5,
    // The minimum velocity the element needs to reach to trigger the throw animation
    threshold: 5,
    // The bounciness of the element if it hits the bounds. 
    // This will be multiplicated with the velocity. 
    // You can use negative values to let the element bounce out of the bounds. 
    // Numbers from -1 to 1 are valid.
    restitution: 0,
    // The friction of the element. 
    // Lower values make the elements decelerate longer. 
    // Numbers from 0 to 1 are valid
    friction: 0.035,
    
    // The friction used out of bounds. 
    // This will be included in the calculations if you used a negative restitution. 
    // Numbers from 0 to 1 are valid
    offsetFriction: 0.1,
    // The maximum velocity the element can reach. 
    // Numbers greater than 0 are valid.
    maxVelocity: 70,
    // Determines whether the draggable should be updated automatically after the browser is resized.
    resizeUpdate: false,
    // Locked axis will be excluded from the translation. 
    // For example: {x: false, y: true}. This will lock the y axis.
    lockAxis: null,
    // callbacks
    onUp: null,
    onDown: null, // {hit, cursorX, cursorY, elementX, elementY, elementWidth, elementHeight}
    onMove: null, // {posX, posY, velX, velY}
    onTranslate: null, // {elementX, elementY, elementWidth, elementHeight, elementBounds}
    preventMove: null, // {movedX, movedY, isTouchDevice}
    
});