Skip to content

carlosjorger/vue-fluid-dnd

Repository files navigation

Icon
Vue Fluid DnD

npm bundle size license version GitHub issues GitHub stars twitter test_coverage

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 ⬇️.
  • Mouse 🐭 and touch 👉📱 (mobile, tablet and so on) support.
  • Nice documentation 📑 and examples.
  • Fully tested 🧪, typed and reliable.

🚀 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