Miscellaneous
A fluid, smooth and versatil drag and drop library for lists on Vue3. It's a lightweight tool ~7 Kb (gzip) with no depenencies.
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.