carlosjorger
Vue Fluid DnD
Vue Fluid DnD is a fluid, smooth and versatil drag and drop library for lists on Vue 3. It's alightweight 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
- ✅ 🎨 Api by Drag & Drop by Formkit
- ✅ 🧰 Features by Vue.Draggable
🚀 Getting Started
Install vue-fluid-dnd:
# with npm: npm i vue-fluid-dnd # with yarn: yarn add vue-fluid-dnd # with pnpm: pnpm i vue-fluid-dndImport the vue composable
import { useDragAndDrop } from "vue-fluid-dnd";Create a list that your want to sort an use useDragAndDrop
// 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);Create childrens
<template> <div ref="parent" style="width: 40%; display: block"> <div v-for="(element, index) in listToSort" :index="index" :style="element.style" >{{ element.number }} </div> </div> </template>Documentation
📚 Check out all the docs.
- 🛠️ Edit the previous here.
- 📘 See others examples here.
🤝 Contributing
If you're interested in contributing to vue-fluid-dnd, please read our contributing docs before submitting a pull request CONTRIBUTING.
🔑 License
- MIT.