A few weeks ago, I built a Kanban board using Laravel and InertiaJS for a client. One of the requirements for the board was to allow users to drag/drop Cards within the same Column and across other Columns.

• This requirement involved writing an efficient source code to save the new Card(s) position after every drag and drop on the board.

• There are multiple ways to handle saving this re-ordering. Here are a few options that I came across.

• This URL explains how Trello calculates the position of each card after a successful drag and drop.

• The Squeezing Reordering algorithm can help solve such a problem. Here’s more explanation about how this algorithm works.

On every drag and drop operation, re-order the affected cards within their columns, send the backend the cards with their new position values, and batch saves the changes.

For this article, I’ve decided to use Option 3. Since I will use InertiaJS (Vue JS) on the front end, re-calculating cards’ new positions with JavaScript is a breeze.