A fluid, smooth and versatil drag and drop library for lists on Vue3. It's a lightweight tool ~7 Kb (gzip) with no depenencies.
![](https://private-user-images.githubusercontent.com/50055316/316053737-4b25fd5e-4815-4a24-afe4-6f41d34be820.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk0MjQyOTUsIm5iZiI6MTcxOTQyMzk5NSwicGF0aCI6Ii81MDA1NTMxNi8zMTYwNTM3MzctNGIyNWZkNWUtNDgxNS00YTI0LWFmZTQtNmY0MWQzNGJlODIwLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI2VDE3NDYzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlmODYxOGFlZmViNWIyZTdjNjhiZDJiZDdhZTViMDMyMWZlMDMyMzhhMDViODVkZDBiYzI1Y2ZlZGZkOWYzZTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.jw5hcl7MIzeOVv00zhV854Tw5Wqf2kCr5dC3kM9T678)
- ✅ 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.