fluid-dnd/README.md

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

 <h1 align="center">
    <img src="public/fluid-dnd-logo.png"
    alt="Icon" width="200" height="200" />
</h1>

<div align="center">

![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/)

<img src="https://github.com/user-attachments/assets/1b7ac5e3-48e9-43f9-a577-e78c6b9eacae" width="100%"/>

</div>

## 🪪 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).