1.1.1 • Published 4 years ago

mickdragger v1.1.1

Weekly downloads
2
License
ISC
Repository
github
Last release
4 years ago

mickdragger

A vanilla JavaScript library to allow for element dragging and drag threshold notification.

MickDragger helps you enable any element to be draggable and notifies you when that element has been dragged past a defined threshold. There is also a configurable activation threshold so that the element won't start moving until a defined drag distance has been detected. This will decrease the amount of accidental drags.

MickDragger also allows you to confine dragging along the horizontal/vertical axis. When the drag activation threshold has been met, the largest horizontal/vertical component will determine the drag axis. Alternatively you can limit its movement only on the vertical axis or only on the horizontal axis and of course you can also allow for full omnidirectional movement.

Getting Started

  1. Fetch the plugin

    The plugin is available using the Node Package Manager(npm)

    $ npm install mickdragger --save
  2. Include plugin script

    <script src="node_modules/mickdragger/src/mickdragger.js"></script>
  3. Create a instance of MickDragger with DOM element

    var $dragEl = document.querySelector('.drag');
    var mickDragger = new MickDragger($dragEl);
  4. Add event listener

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

API

new MickDragger(domElement, options)

Constructor for MickDragger instance.

Parameters:

NameTypeDescription
domElementHTMLElementDOM element to apply draggability and even listeners.
optionsObjectOptional configuration object.

.on(eventName, callbackFunction)

Registers for library callback notifications on MickDragger instances.

Parameters:

NameTypeDescription
eventNamestringName of event to register to.
callbackFunctionfunctionCallback function to evoke when specified event has occurred.

Options

NameDefaultDescription
activationThreshold20Threshold of drag distance before beginning to physically move element. This helps to prevent accidental drags.
actionThreshold80Threshold of drag distance before callback notification is triggered
slideDirectionvertical\|horizontalConfiguration for permitted dragging direction.
stopPropagationtrue\|falseStops the propagation when dragging the element.
verbosetrue\|falsePrint events in the console.

Constants

NameValueDescription
VERTICALverticalDirectional slide option for vertical movement.
HORIZONTALhorizontalDirectional slide option for horizontal movement.
VERTICALHORIZONTALvertical\|horizontalDirectional slide option for strict vertical/horizontal movement.
OMNIDIRECTIONALomnidirectionalDirectional slide option for omnidirectional movement.
ACTIVATIONTHRESHOLD20Default activation threshold.
ACTIONTHRESHOLD80Default action threshold.
event.THRESHOLDactionThresholdEvent key for the action threshold to be hit.
event.DRAGdragEvent key for drag to begin after activation.