_ __ _
__| |_ __ __ _ __ _ /\ \ \__| |_ __ ___ _ __
/ _` | '__/ _` |/ _` |/ \/ / _` | '__/ _ \| '_ \
| (_| | | | (_| | (_| / /\ | (_| | | | (_) | |_) |
\__,_|_| \__,_|\__, \_\ \/ \__,_|_| \___/| .__/
|___/ |_|
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:With Bower:npm install --save-dev npm-dragndrop
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:| Property | Type | Use |
|---|---|---|
| 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 | function | a callback function that gets fired when the element is dropped. |
Callback function event object reference given function(event):
| event.property | Use |
|---|---|
| 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:start | user click/tap the element |
| dragNdrop:drag | user moves the element |
| dragNdrop:stop | user releases the element |
| dragNdrop:dropped | element was dropped into drop-container |
5. Classes
Reference:| .dragNdrop | on every draggable element |
| .dragNdrop--start | on element click |
| .dragNdrop--drag | on element drag |
| .dragNdrop--stop | on element release |
| .dragNdrop--dropped | on successful element drop into container |
| .dragNdrop--dropable | on element that can be dropped into at least one container |
| .dragNdrop__dropzone | on every dropZone |
| .dragNdrop__dropzone--ready | on corresponding dropZone when element is dragged |
| .dragNdrop__dropzone--dropped | on dropZone when an element is successfully dropped inside |