Enhance the drag and drop of your Vue 3 application with Vue Fluid DnD

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 (like Vue draggable based on Sortablejs), lack sufficient maintenance, or do not support Vue 3.
With drag and drop library: Vue Fluid DnD, we present a new solution inspired by the user-friendliness of drag and drop from formkit, the animations of react-beautiful-dnd, and more.

Vue Fluid DnD in action

• First, install vue-fluid-dnd on the current project:

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.:

<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:

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

• Add some styles to the list:

.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:
• Thanks to Vue Fluid DnD you can drag the elements and sort the list.

What's more could you drag and drop?

And this is it. With this as a base, you should be able to drag and drop simple lists of elements on Vue 3 applications. But why should you stop there?

These are other features of the Vue Fluid DnD library not discussed in this article include:

• Lists with a scroll
• Horizontal lists
• Lists with handlers
• Determine whether or not a given element should be draggable
• Drag an drop between lists
• Lists with inputs
• Custom dragging styles
• Custom hover droppable styles
• Sort rows of the tables
• Remove on lists

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 or even better, try out Vue Fluid DnD and provide feedback through an issue, a pull request, or by writing to my personal email.

Comments

[Alok Dev]

I have utilized Formkit's drag-and-drop library. What distinguishes it from others?

[Carlos Jorge Rodriguez]

Vue Fluid DnD doesnt use the drag and drop api like Formkit's drag-and-drop. It's based on react-beautiful-dnd with smooth animations and the draggable element is not transparenet like Formkit' library