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

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, lack sufficient maintenance, or do not support Vue 3.
With 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

npm i vue-fluid-dnd
Enter fullscreen mode
Exit fullscreen mode
  • 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>
Enter fullscreen mode
Exit fullscreen mode
  • 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"> {{ element }} </li> </ul>
</template>
Enter fullscreen mode
Exit fullscreen mode
  • 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;
}
Enter fullscreen mode
Exit fullscreen mode
  • It looks like this:
    number list
  • Thanks to Vue Fluid DnD you can drag the elements and sort the list.

number list using drag and drop

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.


Discover more from Coursity

Subscribe to get the latest posts to your email.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *