vue-fluid-dnd

Vue Fluid DnD

Vue Fluid DnD is a fluid, smooth and versatil drag and drop library for lists on Vue 3. It's alightweight tool ~7 Kb (gzip) with no depenencies. This library is a Vue Draggable Next alternative if you looking for a better ui experience.

🧰 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.

✨ Inspirations

• ✅ 🎥 Animations by react-beautiful-dnd
• ✅ 🎨 Api by Drag & Drop by Formkit
• ✅ 🧰 Features by Vue.Draggable

🚀 Getting Started

1. 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
   

2. Import the vue composable

   import { useDragAndDrop } from "vue-fluid-dnd";
   

3. 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);
   

4. 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>
   

5. Documentation

• 📚 Check out all the docs.
• 🛠️ Edit the previous here.
• 📘 See others examples here.

🤝 Contributing

If you're interested in contributing to vue-fluid-dnd, please read our contributing docs before submitting a pull request CONTRIBUTING.

🔑 License

• MIT.