Add Drag & Drop to Website Easily with Dragula

Looking for a giveaway library to handle drag dump features? Then Dragula is a usually apparatus you’ll need.

This giveaway book lets we add drag dump facilities for any component on your page. This includes support for a React AngularJS frameworks, along with vanilla JavaScript.

Dragula is super easy to set adult and it comes with a garland of tradition triggers for user behaviors. This means we can glow your possess functions after a user drags an item, clicks an item, or rearranges any partial of a page.

Dragula homepageDragula homepage

If we take a demeanour during a live demo you’ll find a few formula snippets, along with usable samples.

The Dragula setup only requires a singular JavaScript file to get it working. Although, a additional options can get a small confusing.

For example, let’s contend we have dual containers, #left and #right, that we wish to support draggable items. You’ll need to manually supplement these containers to a Dragula function to support a drag dump methods.

If we don’t have a plain grasp of a fundamentals of front-end development afterwards you’ll onslaught to use Dragula. But, a GitHub repo has copiousness of great examples we can follow along with and even code snippets we can copy.

Here’s one representation from a GitHub docs for how to target a dual (left and right) containers:

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

Note if we demeanour serve on a GitHub page you’ll find a outrageous list of options we can pass to this function.

You can select whether to duplicate or pierce items, which container(s) support a dragged items and even callback functions that work by opposite user behaviors such as:

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

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

Look over a demo page to see how it works and to get a few formula representation ideas. Dragula is a large library and it’s substantially a best open-source book to handle drag drop, with a widest operation of customization.

Dragula drag and dropDragula drag and drop

Add Comment