Image for post
Image for post

Drag and drop is one of the most helpful features in tons of applications.

Be it a task-list, note-taking, todo-list or a project management tool like Trello, drag and drop is a fantastic feature that makes things quite seamless.

I was always fascinated with Trello’s UI, and even made an attempt to clone it using plain HTML & CSS without any interactions. I knew the next step was to learn drag and drop.

After a lot of Googling, I came across vue-smooth-dnd, which is an amazing plugin!

There are tons of drag and drop tutorials, but what frustrated me the most was none of them implemented Trello-like animation. Especially the placeholder that’s shown from where the card was dragged from, and the “drop” placeholder, i.e. …

About

Vishwanath Sastry

Front-end engineer passionate about everything web-related.

Get the Medium app