Drag-Move Enabled Numbered Lists

One design I am working on required a numbered list with a custom renderer and drag-move enabled. I had no idea how to do this the right way and it took me a couple of hours to finally get it. So I have released the source here just in case anyone else ever needs something similar.

I originally thought the List class was something like the Repeater class. Had it been, the instanceIndex property of the UIComponent would have been the simplest way to implement the feature. Unfortunately, the List doesn’t use Repeater at all. The key is actually the listData property on the renderer that the parent List tries to set on the renderer but only if the renderer implements the IDropInListItemRenderer.

Anyway, take a look at the implementation (right click to view source) – its pretty self-explanatory. I have set it drag/drop enabled but this implementation keeps the numbering correct.

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist. View all posts by Arpit Mathur