fluid-dnd/README.md

An agnostic drag and drop library to sort all kind of lists. With current support for vue 3 and svelte

 <h1 align="center">
    <img src="https://github.com/carlosjorger/vue-fluid-dnd/assets/50055316/dab15832-5290-42ca-b425-db177a2e589e" alt="Icon" width="150" height="140" />
  <br>Fluid DnD<br>
</h1>

<div align="center">

![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-fluid-dnd)
[![license](https://img.shields.io/github/license/carlosjorger/vue-fluid-dnd?label=license)](https://github.com/carlosjorger/vue-fluid-dnd/blob/main/LICENSE)
[![version](https://img.shields.io/npm/v/vue-fluid-dnd)](https://www.npmjs.com/package/vue-fluid-dnd)
![GitHub issues](https://img.shields.io/github/issues/carlosjorger/vue-fluid-dnd)
![GitHub stars](https://img.shields.io/github/stars/carlosjorger/vue-fluid-dnd)
[![twitter](https://img.shields.io/twitter/follow/carlosjorgerc)](https://twitter.com/carlosjorgerc)
[![test_coverage](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage)](https://codeclimate.com/github/carlosjorger/vue-fluid-dnd/test_coverage)

</div>

Vue Fluid DnD is a [**fluid**, **smooth** and **versatil** drag and drop
library for lists on Vue 3](https://vue-fluid-dnd.netlify.app/). It's a**lightweight** tool ~7 Kb (gzip) with no depenencies. This library is a **Vue Draggable Next** alternative if you looking for a better ui experience.

<img src="https://github.com/user-attachments/assets/b350f9a4-7dd7-40ca-ae3f-ecca166a9081" width="100%"/>

## 🧰 Features

- ✅ **Fully customizable 🎨**.
- ✅ **Zero dependencies 🪶**.
- ✅ **Work with horizontal➡️and vertical list :arrow_down:**.
- ✅ **Mouse 🐭 and touch 👉📱 (mobile, tablet and so on) support**.
- ✅ **Nice 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
   ```

3. **Documentation**

- 📚 Check out all the [docs](https://vue-fluid-dnd.netlify.app/).
- 🛠️ Edit the previous [here](https://codesandbox.io/s/nifty-hooks-5plkpl).
- 📘 See others examples [here](https://vue-fluid-dnd.netlify.app/example/vertical-list/single-vertical-list/).

## 🤝 Contributing

If you're interested in contributing to [vue-fluid-dnd](https://github.com/carlosjorger/vue-fluid-dnd), please read our contributing docs before submitting a pull request [CONTRIBUTING](./CONTRIBUTING.md).

## 🔑 License

- [MIT](https://github.com/carlosjorger/vue-fluid-dnd/blob/main/LICENSE).