vue3-juice-dnd
TypeScript icon, indicating that this package has built-in type declarations

0.1.14Β β€’Β PublicΒ β€’Β Published

vue3-juice-dnd

πŸ‘‹ Introduction

Juicy, smooth and versatil drag and drop for lists with Vue.

✨ Features

  • βœ… Easy to install.
  • βœ… Fully customizable.
  • βœ… Work with horizontal and vertical list.
  • βœ… Mouse 🐭 and touch πŸ‘‰πŸ“± (mobile, tablet and so on) support.
  • πŸ”² Fully tested, typed and reliable.
  • πŸ”² Nice documentation and examples.

πŸš€ Getting Started

  1. Install vue3-juice-dnd:

    # with npm:
    npm i vue3-juice-dnd
    
    # with yarn:
    yarn add vue3-juice-dnd
    
    # with pnpm:
    pnpm i vue3-juice-dnd
    
    # with ultra:
    ultra install vue3-juice-dnd
  2. Import components

    import { Draggable, Droppable } from "vue3-juice-dnd";
  3. Create a list that your want to sort

    // Each element have its own styles or classes and the draggable-id
    const listToSort = ref([
      {
        "draggable-id": "h1",
        number: 1,
        style:
          "color: white; background-color: red; width: 50px; margin: 23px 0;",
      },
      //...
    ]);
  4. Use the components

    //pass setRef to child to have the reference of draggable element
    //pass the direction of the list and droppable id
    <Droppable droppable-id="droppable-id" direction="vertical" :items="list1">
       <div style="width: 40%; background-color: darkgray; display: block">
          <Draggable
          v-for="(element, index) in listToSort"
          v-slot="{ setRef }"
          :draggable-id="element['draggable-id']"
          :index="index"
          >
          <div :ref="setRef" :style="element.style">{{ element.number }}</div>
          </Draggable>
       </div>
    </Droppable>

🀝 Contributing

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

Package Sidebar

Install

npm i vue3-juice-dnd

Weekly Downloads

2

Version

0.1.14

License

none

Unpacked Size

82.4 kB

Total Files

16

Last publish

Collaborators

  • carlosjorger