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

25. Front-end engineer passionate about everything web-related.

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