Need help simulating drag-and-drop reordering of items in a list

Dave shared this question 3 years ago

I've already read:

this short and inconclusive thread, as well as

this tutorial (and downloaded and examined the attached prototype),

scoured this bug about it)

And I still don't know how to simulate anything even remotely as nice as:

This behavior. This is almost exactly what I want, especially the indicators that show where the dragged item would be inserted when dropped.

Or this behavior. Here, I like the dotted line indication of the drop target and the "snapping" of other items to get out of the way of the dragged item.

Or even something as simple as this 10-year-old example in plain HTML and JavaScript, which, again, opens a space where the dragged item can be dropped.

Am I barking up the wrong tree to try to simulate something this simple, yet graceful, in Prototyper, or can you point me to an example prototype?

Comments (1)


Hello Dave,

I would suggest using the 'when drop on feature' within the on end drag dialog box to create a similar effect. Selecting the gear next to the drop down box will let you specify which component to move when the element being dragged by the cursor hovers over it. Then, you can simply specify a move action to push the component down to make room.