vue-fluid-dnd
v0.8.0
Published
A Vue 3 drag and drop library to sort all kind of lists
Downloads
294
Maintainers
Readme
A fluid, smooth and versatil drag and drop library for lists on Vue3. It's a lightweight tool ~7 Kb (gzip) with no depenencies.
✨ 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.
🚀 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-dnd
Import 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
🤝 Contributing
If you're interested in contributing to vue-fluid-dnd, please read our contributing docs before submitting a pull request CONTRIBUTING.
🔑 License
- MIT.