Angular — An extremely simple and easy implementation of drag and drop list reordering without library

Liu Ting Chun
4 min readApr 20, 2021

Drag and drop list reordering is a very common feature of webpages with lists of data, such as Trello, Jira, etc. It is also a frequently asked question during frontend developer interviews. It was once one of the most difficult features to implement due to huge amount of DOM manipulations and overlap calculations. Yet, with the help of the HTML drag and drop API and modern frontend frameworks, this feature now only needs tens of lines to implement.

--

--

Liu Ting Chun

Web developer from Hong Kong. Most interested in Angular and Vue. Currently working on a Nuxt.js + NestJS project.