Guide · Open source
How to use Dragula: drag-and-drop in plain JavaScript
Updated · written with AI from the project's own documentation and checked against our catalogue data
Dragula is an open-source JavaScript library from bevacqua that adds drag-and-drop behaviour to page elements, such as moving items between lists. This guide explains what the project is, how to get the source, and what you should verify before building on it. The source available for this guide was a truncated, empty README, so usage details beyond the basic description could not be confirmed here.
Dragulabevacqua/dragula · ★ 22.1k · MIT Install options & downloads Quick start
- 1Decide if Dragula fits. Confirm that you are building in JavaScript and need sortable lists or board-style drag-and-drop. If you need features the documentation does not describe, consider alternatives.
- 2Clone the repository. Run git clone https://github.com/bevacqua/dragula in your terminal to get the source files.
- 3Read the homepage. Open https://bevacqua.github.io/dragula/ to find current usage instructions, since the README available here was empty.
- 4Review the code and examples. Look through the cloned files for examples or documentation that show how to set up drag-and-drop.
- 5Prototype one behaviour. Build a small test page that performs the single drag-and-drop action your project needs.
- 6Check the licence. Review the MIT licence in the repository to confirm it suits your project before you include the code.
What is Dragula?
Dragula is a JavaScript library for web developers who want drag-and-drop on a web page. The project describes itself as simple and is listed under the front-end and vanilla JavaScript topics, which means it is meant to run without a large framework.
The project is released under the MIT licence and is written in JavaScript. Its homepage is https://bevacqua.github.io/dragula/.
Who should use Dragula?
Dragula fits front-end developers who want drag-and-drop in plain JavaScript, especially for sortable lists or kanban-style boards. It is a reasonable option for projects that want a small, dependency-light drag-and-drop tool.
- Front-end developers who want drag-and-drop without a large framework
- Developers building sortable lists or kanban-style boards in plain JavaScript
- Projects that want a small, dependency-light drag-and-drop option
Get the Dragula source code
The README lists one install step: cloning the repository with git. Run the command below in a terminal, then open the project files it creates.
If you are not comfortable with git, you can open the repository page on GitHub and inspect the files there before deciding to use it.
git clone https://github.com/bevacqua/dragulaCheck the documentation before you build
The README available for this guide was empty, so the setup steps, the functions the library exposes and its options are not described here. Use the project homepage at https://bevacqua.github.io/dragula/ and the files in the cloned repository to find the current usage instructions.
Confirm that any feature you need, such as a specific drop behaviour or event, is actually documented before you rely on it.
- Read the homepage for usage instructions
- Look through the cloned files for examples or documentation
- Test the specific behaviour you need in a small prototype first
Compare Dragula with similar libraries
Other vanilla drag-and-drop options include SortableJS and Dragula forks. If Dragula does not cover what you need, these are the alternatives to evaluate.
Compare the licence, documentation and features of each project against your requirements. The source for this guide does not include a feature comparison.
- SortableJS
- Dragula forks
- Other vanilla JavaScript drag-and-drop libraries
What people use it for
- Reordering items in a plain JavaScript list
- Building a kanban-style board that moves cards between columns
- Adding drag-and-drop to a front-end project without a large framework
Frequently asked questions
Is Dragula free to use?
Dragula is released under the MIT licence, according to the project information used for this guide. Read the LICENSE file in the repository to confirm the terms before you use it in your project.
How do I install Dragula?
The README lists one install step: git clone https://github.com/bevacqua/dragula. The README available for this guide was empty, so other setup steps could not be verified here. Check the project homepage for current instructions.
What do I need to use Dragula?
The project information lists no prerequisites. Because using Dragula means writing JavaScript, you need basic front-end development skills and a web page to add it to.
Is Dragula a good alternative to SortableJS?
Both are vanilla JavaScript drag-and-drop libraries, and SortableJS is a common alternative to Dragula. This guide does not include a feature comparison, so test both against your requirements before choosing.
Can non-developers use Dragula?
No, not directly. The project is a JavaScript library, so using it requires writing code. Non-developers would need a developer to integrate it.
Why does my Dragula setup not work?
The source for this guide does not include troubleshooting information. Start by checking the homepage at https://bevacqua.github.io/dragula/ and the examples in the repository, and test in a minimal page to isolate the problem.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Dragula suits front-end developers who want simple drag-and-drop in plain JavaScript for lists or boards and are comfortable reading the code themselves. Pick another option such as SortableJS if you need documented features, non-developer tooling, or clear troubleshooting support, since the README for this project was empty when this guide was written.
Install options & downloads