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

11 Likes

Great post.
Thanks for sharing
Keep it up

2 Likes

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?

1 Like

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.

2 Likes

@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?

Great stuff <3. Ur awesome for sharing!

Love it! You got my GitHub :star:. :smiley:

This looks great, how well do you think it will fair with a page builder, I am currently building a page builder, which uses nested containers to create layouts, and at the moment, vue draggable is having many issues being able to manage the movement between lots and lots of child components causing many glitches where things on the page flash as it can’t figure out where to move the item, how well do you think this will work with that?

Hi,

I can’t promise anything because it is an advanced use case but it should work, providing you follow the recommendations mentioned under the “Nested Droplists” title in the docs. There is an example on CodeSandbox of doing just that.

I shall have a try a bit later and see, if so you might have just saved my life, because before I was using just standard drag and drop methods to manage it all, but as time went on I realised the drop event seemed to be very on and off, sometimes it would work, and sometimes it would not.