Create Draggable Elements With Boundary Notification – mickdragger

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;