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

• 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

• 📚 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.