Vue.js Drag n’ Drop Concept

Vue.js Drag n’ Drop Concept

  • 619

.Vue.js Drag n’ Drop Concept . At the time I was fiddling with a concept that dealt a lot with drag and drop Vue components.

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:

This is image title

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:

This is image title
Best Drawing Ever!!!

Okay, so the idea here is that there are three main container were the routers (travelers) would go.

  1. They would start in the ‘Not In Production’ container when the router was created.
  2. The user would be able to create dynamic department containers in the ‘Departments’ tab and be able to sort them in the order that they should appear.
  3. The user would be able to drag a router to the third container to submit them to inventory or some other next step process.

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:

This is image title

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. :)

Partflow Vue Component