Icon

![npm bundle size](https://img.shields.io/bundlephobia/minzip/fluid-dnd) [![license](https://img.shields.io/github/license/carlosjorger/fluid-dnd?label=license)](https://github.com/carlosjorger/fluid-dnd/blob/main/LICENSE) [![version](https://img.shields.io/npm/v/fluid-dnd)](https://www.npmjs.com/package/fluid-dnd) ![GitHub issues](https://img.shields.io/github/issues/carlosjorger/fluid-dnd) ![GitHub stars](https://img.shields.io/github/stars/carlosjorger/fluid-dnd) _Drag and drop elements of your list smoothly and effortlessly_ [πŸ“– **Documentation**](https://fluid-dnd.netlify.app/) | [🀹 **Examples**](https://fluid-dnd.netlify.app/vue/example/vertical-list/single-vertical-list/)
## πŸͺͺ 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](https://github.com/atlassian/react-beautiful-dnd) - βœ… 🎨 Api by [Drag & Drop by Formkit](https://drag-and-drop.formkit.com/) - βœ… 🧰 Features by [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable) ## πŸš€ Getting Started 1. **Install fluid-dnd:** ```bash # 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](https://github.com/carlosjorger/fluid-dnd), please read our [CONTRIBUTING GUIDELINES](./CONTRIBUTING.md) before submitting a pull request. ## πŸ”‘ License - [MIT](https://github.com/carlosjorger/fluid-dnd/blob/main/LICENSE).