Sortable Grid — Drag & Drop on steroids using Vue.js

Maciej Kaczorowski
Sep 2, 2019 · 4 min read
Image for post
Image for post

Drag & drop might be a nightmare for some reason, the API is pretty limited and the technology progress is way too fast

Facing business might be tough in many aspects, clients always want to reach impossible things so do I! Have you ever though to speed up dragging with GPU? The goal is to limit layout recalculations — they are way too expensive in real time applications.

Business requirements are to create interactive (kinda “sortable”) table with being able to reorder columns. To achieve it we are going to use display grid instead of table.

Whole project is written in Vue.js, it could be improved with Vuex/EventBus to reduce emitting hell.

Both versions are available at Github CPU | GPU! Enjoy :)

Logic introduction

CPU Solution

The first thing which comes to mind would be using only CPU by switching dragged element position with element under dragged. Let’s go through the most common problems.

As we can see whenever we swap dragged element with element under the layout is going to be recalculated, what’s more — we cannot do efficient animation!

We can do better — don’t we!?

GPU Solution — Recommended

First thing! The problem cannot be solved only by using GPU — the elements has to be rendered somehow as well as creating clone of dragged element. We can only improve the user experience interaction after we did start drag by using transform approaches.

No flashing baby!! Yaay!

Conclusion

The first scenario by using only CPU operations seems much more easier to understand, there is much more less things that you have to take care of — honestly two things! Swapping models in array with given indexes and the algorithm which determinate position of mouse above the column. By implementing transform calculations in second solution the complexity has grown. It requires much more logic to implement. Indexing system which was taken care by browser engine has to be made from scratch to keep the track of transformed elements.

Tips

Warning! You need to save removed data model somewhere and add it to the array inside call of ondragend otherwise you will not have correct data structure — removed element will be gone forever.

window.requestAnimationFrame(() => {
// Remove data from model at index
});

Feel free to ask any question or post a feedback! Hope you like it! I did implement more complex solution in Open Source PIM Ergonode. Enjoy!

ergonode

First human-centric designed PIM.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store