Skip to content

ThibaultJanBeyer/dragNdrop

Repository files navigation

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

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.

drag and drop demo

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:

property type usage
element single DOM element (node) the element that will be draggable
elementHandle single DOM element (node) (optional) element to handle the drag. I.e. you want only one element to react to dragging
customStyles false / true (boolean) (optional) when set to true, the styles you give the element will overwrite those from the plugin
useTransform true / false (boolean) (optional) use hardware accelerated css (translate3d) or not (default: true)
constraints false / 'x' / 'y' / single DOM element (boolean/ string/ node) (optional) 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)) (optional) one or more drop-elements (where the element can be dropped into)
callback function (optional) 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

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!