vue3-juice-dnd
v0.1.14
Published
## π Introduction
Downloads
18
Maintainers
Readme
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
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
Import components
import { Draggable, Droppable } from "vue3-juice-dnd";
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;", }, //... ]);
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>
- π All docs here.
π€ Contributing
If you're interested in contributing to Fvue3-juice-dnd JS, please read our contributing docs before submitting a pull request CONTRIBUTING.