Dragula: Drag and Drop Plugin

Have you ever wanted a drag and drop library that just works? One that doesn’t depend on bloated frameworks, and that has great support? Then Dragula is precisely what you have been looking for.

This little plugin makes drag and drop easier than you can imagine. Key features include:

• Super easy to set up
• No bloated dependencies
• Figures out sort order on its own
• A shadow where the item would be dropped offers visual feedback
• Touch events!
• Seamlessly handles clicks without any configuration

Install using NPM or Bower, include the CSS files and you are ready to go. (And there’s plenty of documentation if you need help along the way.)

Here’s how it works: By default, Dragula will allow the user to drag an element in any of the containers and drop it in any other container in the list. If the element is dropped anywhere that’s not one of the containers, the event will be gracefully cancelled according to the revertOnSpill and removeOnSpill options. (Note that dragging is only triggered on left clicks, and only if no meta keys are pressed.)

There are plenty of options and customizations so you can dictate exactly how this plugin will work on your website.