https://github.com/carlosjorger/vue-fluid-dnd
A drag and drop🤜🫳library for Vue 3🌿
https://github.com/carlosjorger/vue-fluid-dnd
drag-and-drop draggable droppable lightweight no-dependencies sortable typescript vue vue-draggable vue3
Last synced: about 2 months ago
JSON representation
A drag and drop🤜🫳library for Vue 3🌿
- Host: GitHub
- URL: https://github.com/carlosjorger/vue-fluid-dnd
- Owner: carlosjorger
- License: mit
- Created: 2024-01-13T16:56:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-18T15:19:42.000Z (2 months ago)
- Last Synced: 2025-03-29T13:06:07.033Z (about 2 months ago)
- Topics: drag-and-drop, draggable, droppable, lightweight, no-dependencies, sortable, typescript, vue, vue-draggable, vue3
- Language: TypeScript
- Homepage: https://vue-fluid-dnd.netlify.app
- Size: 2.57 MB
- Stars: 286
- Watchers: 7
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Vue Fluid DnD
[](https://github.com/carlosjorger/vue-fluid-dnd/blob/main/LICENSE)
[](https://www.npmjs.com/package/vue-fluid-dnd)
[](https://twitter.com/carlosjorgerc)
[](https://codeclimate.com/github/carlosjorger/vue-fluid-dnd/test_coverage)
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.
## 🧰 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 vue-fluid-dnd:**
```bash
# with npm:
npm i vue-fluid-dnd
# with yarn:
yarn add vue-fluid-dnd
# with pnpm:
pnpm i vue-fluid-dnd
```
2. **Import the vue composable**
```js
import { useDragAndDrop } from "vue-fluid-dnd";
```
3. **Create a list that your want to sort an use useDragAndDrop**
```js
// Each element have its own styles or classes and the draggable-id
const listToSort = ref([
{
number: 1,
style:
"color: white; background-color: red; width: 50px; margin: 23px 0;",
},
//...
]);
// create the parent element and set drag and drop configuration on the parent and children elements (creating events, statees, styles, etc) calling useDragAndDrop composable
const { parent } = useDragAndDrop(listToSort);
```
4. **Create childrens**
```jsx
{{ element.number }}
```
5. **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).