I started working with Vue back in June of 2017. At the time I was fiddling with a concept that dealt a lot with drag and drop Vue components. Before I hit the idea using some Vue library, I wanted to build a mock up idea using vanilla JavaScript. The result was this right here:
The idea started out pretty simple. I was using the standard drag and drop javascript api in order to build static drop containers that would receive droppable elements. Nothing to crazy. When I began to really mock up the idea in my fabulous drawing skills (sarcasm alert) this is what I came up with:
Best Drawing Ever!!!
Okay, so the idea here is that there are three main container were the routers (travelers) would go.
The other container on the far right of the picture is what the router containers would look like when they expand in the department container; showing more information about the router.
Utilizing a library called Vue.Draggable, I was able to make the idea come to life. Vue.Draggable is a SortableJs pluggin for Vuejs. Very easy to learn and use. I’ll link bellow some example code for you.
So, with this library I was able to build this right here:
Basically, each of the department containers as well as the two main containers on the sides are an instance of the Draggables component. The Vue component overall utilizes Vuex to manage the state of the application as it’s a lot of complicated (and at times hacky) code to get this to work. On every drop, I’m capturing the container id, the drop index, the previous index of the router component and the main container id. Then, using the drop index, the component makes a PATCH request to the API in order to sort through all of the routers and updated their sorting keys.
This is one of my favorite project to have worked on and I look forward to improving the concept in the future. Thank you for checking out my accomplishment. Here is the link to the code of this component. I hope it inspires you. :)
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ Javascript Project Tutorial: Budget App
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch