Add Drag & Drop to Website Easily with Dragula

By Jake Rocheleau. in Toolkit. Updated on December 13, 2019.

Looking for a free library to handle drag & drop features? Then Dragula is the only resource you’ll need.

This free script lets you add drag & drop features for any element on your page. This includes support for the React & AngularJS frameworks, along with vanilla JavaScript.

Dragula is super easy to set up and it comes with a bunch of custom triggers for user behaviors. This means you can fire your own functions after the user drags an item, clicks an item, or rearranges any part of the page.

If you take a peek at the live demo you’ll find a few code snippets, along with usable samples.

The Dragula setup only requires a single JavaScript file to get it working. Although, the extra options can get a little confusing.

For example, let’s say you have two containers, #left and #right, that you want to support draggable items. You’ll need to manually add these containers to the Dragula function to support the drag & drop methods.

If you don’t have a solid grasp of the fundamentals of front-end development then you’ll struggle to use Dragula. But, the GitHub repo has plenty of great examples you can follow along with and even code snippets you can copy.

Here’s one sample from the GitHub docs for how to target the two (left and right) containers:

dragula([document.querySelector('#left'), document.querySelector('#right')]);

Note if you look further on the GitHub page you’ll find a huge list of options you can pass to this function.

You can choose whether to copy or move items, which container(s) support the dragged items and even callback functions that work through different user behaviors such as:

Hovering over a container
Initial click & drag event
Drop event
Dropping an element out of bounds
Cloning an element/container by dragging

This library will take some initial work but if you’re familiar with JavaScript it should be a no-brainer.

Look over the demo page to see how it works and to get a few code sample ideas. Dragula is a massive library and it’s probably the best open-source script to handle drag & drop, with the widest range of customization.