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 Conversational Technologies, Affective Computing and Blockchains and decentralized services. 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.

2 thoughts on “Drag-Move Enabled Numbered Lists”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s