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

dragNdrop

easily add drag and drop functionality to your dom nodes elements

Project Page: Demo & Info

https://thibaultjanbeyer.github.io/dragNdrop/

Key-Features

• Add draggability to any DOM element
• Add corresponding drop containers
• Callback, Classes and Events available
• Awesome browser support, works even on IE5
• Ease of use
• Lightweight, only 1KB gzipped
• Performance: dragNdrop uses hardware accelerated css by default which makes it hyper fast. (gracefully falls back to normal position manipulation if browser doesn’t support it)
• Free & open source under MIT License

Why?

Because there was nothing this fast with such high browser support that does not require jquery out there.

Note: if you're looking for a solution to drag and drop multiple elements, check out DragSelect

1. Installation

easy

Just download the file (minified) and add it to your document:

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

npm

npm install --save-dev npm-dragndrop

bower

bower install --save-dev dragndrop

That's it, you're ready to rock!
Of course you can also just include the function within your code to save a request.

Usage

Now in your JavaScript you can simply pass elements to the function like so:

simple

dragNdrop({
  element: document.getElementById("element1"), // draggable element
  dropZones: [document.getElementById("dropContainer1")] // dropzone (optional)
});

complete

var dnd = dragNdrop({
  // element to be dragged (single DOM element) // (optional, default: '#dragNdrop-element')
  element: document.getElementById("element1"),

  // element to handle the drag. I.e. you want only one element to react to dragging (single DOM element) // (optional)
  elementHandle: document.getElementById("element1handle"),

  // custom styles (false / true) // (optional, default: false)
  customStyles: false,

  // custom styles (true / false) (if true, element styles overwrite plugin styles) // (optional, default: true)
  useTransform: true,

  // constraints (false / 'x' / 'y' / DOM element) // (optional, default: false)
  constraints: false,

  // drop (false / DOM element) // (optional, default: false)
  dropZones: [document.getElementById("dropContainer1"), ".myClass"],
  // also valid = dropZones: '.myClass'

  // callback(event){}
  callback: function(event) {
    // (optional)
    // event.element, event.dropped, event.dropZones, event.constraints, event.customStyles
  }
});

// if you add the function to a variable like we did, you have access to all its functions
// and can now use start(), pause() and stop() like so:
dnd.pause(); // will stop the dragging process
dnd.stop(); // will teardown/stop the whole functionality
dnd.start(); // reset the functionality after a teardown

Check out the examples page for more examples.

Properties:

Callback Event Object:

Events

Classes

Have Fun!

Last Words

Don’t forget to star this repo if you like the plugin, that’s what keeps me running. Found a bug? Open an issue or make a pull requests!