Looking for a free library to handle drag & drop features? Then Dragula is the only resource you’ll need.
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.
For example, let’s say you have two containers,
#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:
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
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.