Vue Fluid DnD v0.7 Drag and drop across lists and more

Carlos Jorge Rodriguez — Fri, 23 Aug 2024 13:19:57 +0000

We are excited to announce the release of Vue Fluid DnD Version 0.7. We add new features that significantly expand the range of use cases for our humble library and solving bugs of the previous version.

Drag and drop between two or more lists

To provide a more versatile solution, in this version you can drag and drop elements between groups of lists (can be vertical or horizontal list). Also, the rearranging of the elements after dragging one from a list to another have fluid animations too.

Add draggingClass config

With draggingClass you can pass a CSS class selector that will be added to the element while
it´s being dragged.

Add delay to draggable elements on touch screen

To make it more accessible on the mobile view. We add a delay before drag the element to facilitate navigation through the list with a touch device.

Fixing Bugs

Thanks for the feedback of the community specially from github and reddit. We're manage to solve compatibility issues with other browsers and the touch view.

We invite you to try this new, much more mature version of Vue Fluid DnD and give us feedback through github or this rodriguezcuelloc@gmail.com.

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

Carlos Jorge Rodriguez — Sat, 27 Apr 2024 19:48:30 +0000

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:

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.

Forem: Carlos Jorge Rodriguez