Drag and drop elements of your list smoothly and effortlessly

📖 Documentation | 🤹 Examples

🪪 About

Fluid DnD is a fluid, agnostic and versatile drag and drop library for lists; with support for Vue, React and Svelte. It's a lightweight tool ~8 Kb (gzip) with no depenencies.

🧰 Features

• ✅ Fully customizable 🎨.
• ✅ Zero dependencies 🪶.
• ✅ Works with horizontal➡️and vertical list⬇️.
• ✅ Mouse 🐭 and touch 👉📱 (mobile, tablet and so on) support.
• ✅ Clear documentation 📑 and examples.
• ✅ Fully tested 🧪, typed and reliable.

✨ Inspirations

• ✅ 🎥 Animations by react-beautiful-dnd
• ✅ 🎨 Api by Drag & Drop by Formkit
• ✅ 🧰 Features by Vue.Draggable

🚀 Getting Started

1. Install fluid-dnd:

   # with npm:
   npm i fluid-dnd
   
   # with yarn:
   yarn add fluid-dnd
   
   # with pnpm:
   pnpm i fluid-dnd
   

📚 Libraries Support

• Vue >=3.0.0
• React >= 18.0.0
• Svelte >= 5.0.0

🤝 Contributing

If you're interested in contributing to fluid-dnd, please read our CONTRIBUTING GUIDELINES before submitting a pull request.

🔑 License

• MIT.