easy javascript drag and drop plugin – v1.1.8 – Example:
JavaScript HTML CSS
Latest commit c524e34 Dec 21, 2016 @ThibaultJanBeyer committed on GitHub Merge pull request #1 from ThibaultJanBeyer/feature/dropzone-css-sele…
…ctor

Feature/dropzone css selector

readme.md

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

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 small that does not require jquery out there.

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

dragNdrop({

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

  // 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
  }

});

Check out the examples page for more examples.

Properties:

property type usage
element single DOM element (node) the element that will be draggable
customStyles false / true (boolean) when set to true, the styles you give the element will overwrite those from 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)/selector(s)) one or more drop-elements (where the element can be dropped into)
callback function a callback function (taking an event object) that gets fired when the element is dropped

Callback Event Object:

event.property usage
element the element that was dropped
dropped false = element was not dropped into a drop-container. [node] = array of dom elements = drop-containers in which the element was dropped
customStyles false / true
constraints false / 'x' / 'y' / single DOM element
dropZones As array of DOM elements containing all drop-zones where the element can be dropped into

Events

name trigger
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 a drop-container

Classes

name trigger
.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 each dropZone
.dragNdrop__dropzone--ready on corresponding dropZone when element is dragged
.dragNdrop__dropzone--dropped on dropZone when an element is successfully dropped inside

Have Fun!

Typewriter Gif