Vue-fluid-dnd NPM

npm bundle size GitHub issues GitHub stars

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>