A fluid, smooth and versatil drag and drop library for lists on Vue3. It's a lightweight tool ~5 Kb (gzip) with no depenencies.
- ✅ Fully customizable 🎨.
- ✅ Zero dependencies 🪶.
- ✅ Work with horizontal➡️and vertical list ⬇️.
- ✅ Mouse 🐭 and touch 👉📱 (mobile, tablet and so on) support.
- ✅ Nice documentation 📑 and examples.
- ✅ Fully tested 🧪, typed and reliable.
-
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
If you're interested in contributing to vue-fluid-dnd, please read our contributing docs before submitting a pull request CONTRIBUTING.
- MIT.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent