I had used VueDraggable in my projects before, but only sparingly. One of the recent experiences taught me just how cool it was!
The Problem of Drag & Drop
There is no problem.. really.
- You drag
- You drop
- And the world goes “yeah yeah yeah”
(read using this tone - sorry, couldn’t resist)
The problem manifests itself when that drag and drop can include any and all components - so, that’s effectively modern web.
VueDraggable can make that problem go away - in a nice way. You can almost drag any component to any component, and still live to tell that tale. Do remember though - we are not solving problem of dragging external resources (like URLs, images or text ) on to our web app, but rather dealing with the problem of moving or copying a component of our app in “some other” (hopefully happier) place.
vuedraggable package to get started.
You can now use
Anything that you want to drag and drop will be contained within
draggable. Let’s see examples to understand more.
A Simple Drag & Drop
The beauty of
vuedraggable is that you can drag and drop anything. Let’s try out with something simple first - text.
And you are done!
Vuedraggable takes care of identifying the elements, finding their boundaries, and pushing the elements to the right place after the drag & drop.
Drag & drop from one group to the other
Kanban boards are all the rage these days (huh.. kids). How about designing your own Kanban board? Just use Vuedraggable!
See the below example using Vuetify to create the grid and for some basic styling.
You will get to this result in no time..
All we did was to specify a
group name that should remain the same for all elements in the same group.
Also, did you take note that I used a different tag here?
You can specify any tag to wrap around your draggable elements using
tag, it is
div by default. Take care to see that the draggable elements (the elements with
for loop) are direct descendants of
Drag & drop images
How about dragging and dropping images?
Images are just as easy as text.
How about alternatives?
VueDraggable is based on
sortable library and is fairly well documented and quite popular. You should be in safe hands for the most part. There are other libraries like -
- vue-sortable, also based on the
sortablelibrary but not as widely used
- Vue-Dragula: Based on Dragula, does not seem to be actively maintained anymore
However, do note a limitation of
sortablejs (and VueDraggable) - it makes use of native HTML5 API for drag & drop and is subject to its constraints. You will notice this if you need to take control of every event or enable advanced functions during drag & drop.
To go beyond HTML5 API, have a look at one of the alternatives below.
- vue-grid-layout: Certainly one of the more powerful libraries for drag & drop. Quite powerful, actively maintained and it just rocks
- vue-easy-dnd: This library is fairly new but gaining rapid popularity
- Vue-smooth-dnd: offers more functionality, not constrained by HTML5 API
While the above libraries are powerful, they also need quite a bit more coding to get things going. For example,
vue-grid-layout needs the exact points in x/y-axes, and element height/width.
VueDraggable is a super-friendly, and easy-to-use library. You can do much much more with VueDraggable like cloning elements, drag & drop nested elements.
See more examples of what VueDraggable can do. Use it in your own projects and go crazy!