Vue Fluid DnD
[](https://github.com/carlosjorger/vue-fluid-dnd/blob/main/LICENSE)
[](https://www.npmjs.com/package/vue-fluid-dnd)
[](https://twitter.com/carlosjorgerc)
[](https://codeclimate.com/github/carlosjorger/vue-fluid-dnd/test_coverage)
Vue Fluid DnD is a [**fluid**, **smooth** and **versatil** drag and drop
library for lists on Vue 3](https://vue-fluid-dnd.netlify.app/). It's a**lightweight** 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](https://github.com/atlassian/react-beautiful-dnd)
- β
π¨ Api by [Drag & Drop by Formkit](https://drag-and-drop.formkit.com/)
- β
π§° Features by [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)
## π Getting Started
1. **Install vue-fluid-dnd:**
```bash
# 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**
```js
import { useDragAndDrop } from "vue-fluid-dnd";
```
3. **Create a list that your want to sort an use useDragAndDrop**
```js
// 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**
```jsx
```
5. **Documentation**
- π Check out all the [docs](https://vue-fluid-dnd.netlify.app/).
- π οΈ Edit the previous [here](https://codesandbox.io/s/nifty-hooks-5plkpl).
- π See others examples [here](https://vue-fluid-dnd.netlify.app/example/vertical-list/single-vertical-list/).
## π€ Contributing
If you're interested in contributing to [vue-fluid-dnd](https://github.com/carlosjorger/vue-fluid-dnd), please read our contributing docs before submitting a pull request [CONTRIBUTING](./CONTRIBUTING.md).
## π License
- [MIT](https://github.com/carlosjorger/vue-fluid-dnd/blob/main/LICENSE).