Enhance the drag and drop of your Vue 3 application with Vue Fluid DnD
Tags: vue, typescript, javascript, npm
Published: 2024-04-27 19:48:30

In web applications that use Single-Page Application frameworks like Vue, React, Angular, etc., the need to organize lists or other collections of elements by sorting them, adding, removing, or moving elements within them is very common. 
The Vue ecosystem is not as rich as React's, and while there are good drag and drop solutions for Vue, most of them are wrappers of other libraries, lack sufficient maintenance, or do not support Vue 3.
With [Vue Fluid DnD](https://vue-fluid-dnd.netlify.app/), we present a new solution inspired by the user-friendliness of [drag and drop from formkit](https://drag-and-drop.formkit.com/), the animations of [react-beautiful-dnd](https://react-beautiful-dnd.netlify.app/), and more.

## Vue Fluid DnD in action

- First, install [vue-fluid-dnd](https://www.npmjs.com/package/vue-fluid-dnd) on the current project:

```bash
npm i vue-fluid-dnd
```

- Import the library and use of its simple API to pass the list of numbers to be sorted as a parameter.:

```vue
<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "vue-fluid-dnd";

const list = ref([1, 2, 3]);
const { parent } = useDragAndDrop(list);

</script>
```

- The variable `parent` contains the reference to the container of the items to be sorted, which is passed by reference to the `ul` element, and for each item, the position of this item in the list (`index`) is also passed:

```html
<template>
	<ul ref="parent" class="number-list">
		<li class="number" v-for="(element, index) in list" :index="index">
		{{ element }}
		</li>
	</ul>
</template>
```

- Add some styles to the list:

```css
.number {
  border-style: solid;
  padding-left: 5px;
  margin-top: 0.25rem;
  border-width: 2px;
  border-color: black;
}
.number-list {
  display: block;
  padding-inline: 25px;
}
```
- It looks like this:
![number list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fam6um7ehukjosm4l8ta.png)
- Thanks to **Vue Fluid DnD** you can drag the elements and sort the list.

![number list using drag and drop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmkr7mnj44ade7brgvmd.png)

## Benefits of using Vue Fluid DnD

**Lightweight**: Vue Fluid DnD has no dependencies, making it into a lightweight, reliable, and robust library as it does not inherit any errors from external dependencies.

**Simple**: The Vue Fluid DnD API is simple and quite easy to use. It is also flexible for future functionalities and changes that are planned to be added in the future.

**Attractive**: Vue Fluid DnD was conceived to enhance drag and drop functionalities with elegant animations when the elements are moved over the application. More customization in this area is promised in the future.

## Conclusions

This article introduces Vue Fluid DnD as an alternative to drag and drop tools in the Vue 3 ecosystem. An example of its usage is provided, and the advantages of this tool are briefly discussed.
If you are interested in supporting the advancement of this project, you can leave a star on the [repository](https://github.com/carlosjorger/vue-fluid-dnd) or even better, try out Vue Fluid DnD and provide feedback through an *issue*, a *pull request*, or by writing to my [personal email](rodriguezcuelloc@gmail.com).