The List Reorders Under Your Finger, So What You See Mid-Drag Is the Result

Sorting had drifted into four different behaviors. Photo categories, video categories, social links and other links were reordered with a pair of up and down arrows, one click per position. Credits could be dragged, but with no indication of where the row was going to land, its own animation, and no restriction on dragging sideways. Tracks had a third variant.

All four are now one implementation, and the interaction is the one the track list already had.

How it works

An Enable Sorting button puts the whole page into sort mode. Rows wiggle so it is obvious the mode is on, and each row's three-dot menu turns into a grab handle for as long as it lasts.

That swap is deliberate. A row cannot be both a menu and a drag target in the same place without one of them becoming a mis-click, and a mis-click on a menu is how you delete something you meant to move.

The part that was actually broken

The old approach opened a gap by pushing the rows below down by the height of the row you were dragging. That works when every row is the same height. It falls apart the moment they are not, and a reel holding one playlist is a fraction of the height of a reel holding four. So the gap appeared in the wrong place, or did not appear at all, and there was no way to tell where a reel would end up until it was already there.

The list now reorders under the pointer as you move, which sidesteps the geometry entirely. What is on screen mid-drag is the resulting order. Releasing saves what you are already looking at. Cancelling puts both lists back to whatever the server last reported, not to a guess.

The row in flight draws as a dashed, faded slot rather than a solid row, so it reads as a gap waiting to be filled rather than a move that has already happened.

Two deliberate exceptions

Dragging is locked to the vertical axis on every list except one. Social links wrap into two columns, so sideways is a genuine direction there and locking it would make half the positions unreachable.

Dragging a playlist across a reel boundary is ignored on purpose. "Move to another Reel" in the playlist menu is explicit about where the playlist lands and shows you the choice, where a stray diagonal drag is easy to do by accident and annoying to undo. The reels and playlists structure is the reason that boundary exists at all.

What this covers

Photo and video categories, credits, social links, other links, tracks, reels and playlists. Menu ordering already worked this way and is unchanged, which is described in drag to reorder your menu.

Ordering matters more than it looks. Sorting credits exactly how you want and photo categories both come down to putting the strongest thing first, which is also the argument in user-friendly design.

Create a free actor website, or see the plans.


Tomasz Mieczkowski

About Tomasz Mieczkowski

Tomasz Mieczkowski is the co-founder of IADB.com and all of the related websites for film and tv industry professionals.

Connect with Tomasz: