Easy-DnD - New drag and drop components for Vue!

Hello,

I just released a new drag and drop library for Vue.

It can be used to easily transfer data from some components to others using drag and drop. It also supports lists as a special kind of drop target : lists can be inserted into and reordered using drag and drop.

Please check it out !

Github : https://github.com/rlemaigre/Easy-DnD

NPM : https://www.npmjs.com/package/vue-easy-dnd

7 Likes

Great post.
Thanks for sharing
Keep it up

1 Like

This is awesome, I’ve been using Vue-draggable until now

This looks really cool. Can you explain what would be the advantages of your library over others, e.g. vue-draggable?

Hello,

Thank you for your interest :slight_smile:

Honnestly I don’t know if my library is better than others, because I’ve never used any other except vue-drag-drop which convinced me that using the HTML5 drag and drop API as a foundation was too limitative for my purpose.

Taking a quick look at vue-draggable, I see some important differences.

First, vue-draggable is a wrapper around sortablejs. Easy-DnD is pure VueJS. So its API is probably more in line with the Vue way of doing things. For example, it takes full advantage of slots to customize visual feedback during the drag.

Second, the purpose of vue-draggable is “only” to move items between lists and to reorder lists. And perhaps it does it better than my library, although it seems Easy-DnD is more customizable (slots). But the scope of Easy-DnD is much broader.

The purpose of my library is to solve the general problem of drag and drop in a Vue application. That is, creating primitives that allow the user to move data from one component to another using the mouse for whatever purpose. Drag and dropping between two lists, and reordering lists, is something that is built on top of those primitives and not the core of the library.

The fact that the purpose of Easy-DnD is much broarder than the one of vue-draggable probably makes its API a bit more verbose though.

Bottom line is, if all you need to do is drag and drop between lists, use vue-draggable. It much more mature and its API is probably simpler.

On the contrary, if you need to use drag and drop for another purpose besides dealing with lists, like the idea of using the same API for drag and drop everywhere in your app (for lists and everything else), and feel adventurous enough to try out a very young library that has never been used yet in the wild, go for Easy-DnD.

@rlemaigre I just wanted to drop in here to say you did a fantastic job on this component. I’ve tested the 5 most popular Vue D&D packages and this was by far the fastest and cleanest implementation I’ve used. It’s delightful, thank you!

How can we buy you a beer or coffee?

1 Like

Thank you for your kind words :slight_smile:

1 Like

btw are you using quasar in those demo gifs?