Create Draggable Elements With Boundary Notification – mickdragger

Category: Drag & Drop , Javascript | October 4, 2019
Author: Juicetan
Views Total: 553 views
Official Page: Go to website
Last Update: October 4, 2019
License: MIT

Preview:

Create Draggable Elements With Boundary Notification – mickdragger

Description:

mickdragger is a JavaScript library that makes an element draggable and alerts the user when the element is moved beyond the boundary.

How to use it:

Install & download the package.

# NPM
$ npm install mickdragger --save

Include the mickdragger library from the src folder.

<script src="/src/mickdragger.js"></script>

Enable the draggable functionality on an element.

var $dragEl = document.querySelector('.draggableElement');
var mickDragger = new MickDragger($dragEl);

Trigger an event when the element is moved beyond the boundary.

mickDragger.on(MickDragger.event.THRESHOLD, function(){
  // do something
});

Available options.

var mickDragger = new MickDragger($dragEl,{

    // Threshold of drag distance before beginning to physically move element. This helps to prevent accidental drags.
    activationThreshold: 20,

    // Threshold of drag distance before callback notification is triggered
    actionThreshold 80,

    // vertical|horizontal
    slideDirection: 'vertical',

    // Stops the propagation when dragging the element.
    stopPropagation: true,

    // Print events in the console.
    verbose: false
    
});

Changelog:

v1.1.1 (02/15/2020)

  • Add verbosity and event propagation controls;

You Might Be Interested In:


Leave a Reply