_                     __    _
  __| |_ __ __ _  __ _  /\ \ \__| |_ __ ___  _ __
 / _` | '__/ _` |/ _` |/  \/ / _` | '__/ _ \| '_ \
| (_| | | | (_| | (_| / /\  | (_| | | | (_) | |_) |
 \__,_|_|  \__,_|\__, \_\ \/ \__,_|_|  \___/| .__/
                 |___/                      |_|

Download

Browser Support & Performance

dragNdrop was successfully tested on a wide range of browsers, it even works on ie5. On modern browsers dragNdrop uses hardware accelerated css by default which makes it hyper fast. Old Browsers? Don’t worry: it gracefully falls back to normal position manipulation if the browser does not support hardware accelerated css

Ease of use

Your time matters, so dragNdrop is super quick and easy to use. If you know the basics of javascript you're ready to rock.

Lightweight

You want your website to be loaded as fast as possible. So dragNdrop only weights ~3KB (1KB gzipped) which is an average of 0,00005s loadtime. You name it – it's nothing.

Free

dragNdrop is published under the MIT license and completely free to use. Oh and it's Open Source as well, so you can make it even better.

animated typewriter gif

Documentation

1. Installation

Regular:

Download dragNdrop (minified) and add it to your document:

<script src="https://thibaultjanbeyer.github.io/dragNdrop/dNd.min.js"></script>

That's it, you're ready to rock!

Of course you can also just include the function within your code to save a request

With NPM:
npm install --save-dev npm-dragndrop
With Bower:
bower install --save-dev dragNdrop

2. Usage

See the Pen dragNdrop simple example by Thibault Jan Beyer (@ThibaultJanBeyer) on CodePen.

2b. Usage with element handle

See the Pen dragNdrop simple example by Thibault Jan Beyer (@ThibaultJanBeyer)on CodePen.

2c. Usage with constraints

See the Pen dragNdrop with constraints example by Thibault Jan Beyer (@ThibaultJanBeyer) on CodePen.

2d. Usage with dropZones

See the Pen dragNdrop with dropElements example by Thibault Jan Beyer (@ThibaultJanBeyer) on CodePen.

2e. Usage with callback function

See the Pen dragNdrop with callback example by Thibault Jan Beyer (@ThibaultJanBeyer) on CodePen.

2f. start(), pause() and stop()

If you add the function to a variable you get full controll over all its functions:
var dnd = dragNdrop({ element: document.getElementById('element') });

// you can now use start(), pause(), stop(), etc. like so:
dnd.pause()  // will stop the current dragging process
dnd.stop();  // will teardown/stop the whole functionality
dnd.start();  // reset the functionality after a teardown

3. Properties:

Reference:
PropertyTypeUse
element single DOM element (node)the element that will be draggable
customStyles false / true (boolean)when set to true, no styles will be added by the plugin
useTransform true / false (boolean)use hardware accelerated css (translate3d) or not (default: true)
constraints false / 'x' / 'y' / single DOM element (boolean/ string/ node)constrain the element:
'x' = element can only be dragged on the x axis.
'y' = element can only be dragged on the y axis.
DOM element = element can only be dragged within that container
dropZones false / array of DOM element(s) or css selector(s) (node(s))one or more drop-elements (where the element can be dropped into)
callback functiona callback function that gets fired when the element is dropped.

Callback function event object reference given function(event):
event.propertyUse
element the element that was dropped
customStyles false / true
useTransform true / false
constraints false / 'x' / 'y' / single DOM element
dropZones As array of DOM elements containing all drop-zones where the element can be dropped into
dropped false = element was not dropped into a drop-container
[node] = array of dom elements = drop-containers in which the element was dropped

4. Events

Reference:
dragNdrop:startuser click/tap the element
dragNdrop:draguser moves the element
dragNdrop:stopuser releases the element
dragNdrop:droppedelement was dropped into drop-container

5. Classes

Reference:
.dragNdropon every draggable element
.dragNdrop--starton element click
.dragNdrop--dragon element drag
.dragNdrop--stopon element release
.dragNdrop--droppedon successful element drop into container
.dragNdrop--dropableon element that can be dropped into at least one container
.dragNdrop__dropzoneon every dropZone
.dragNdrop__dropzone--readyon corresponding dropZone when element is dragged
.dragNdrop__dropzone--droppedon dropZone when an element is successfully dropped inside

Have Fun!