How to Communicate a Delay in Drag-Start Interaction?

Question

I want to visualize a drag start delay, it takes 1 second hold before drag starts, and I want the user to understand they should keep on holding the item. What is a good practice for a ui/ux visualizing it?

(The items are some images organized in multiple rows like below)

Answer 1

One option would be to use something like a progress indicator, to denote that something is going to happen if the user holds it. For example, for the first 100-200ms, there could be no visualisation and after that you could display a radial progress indicator that fills up for 800-900ms around your cursor to denote that we're drag mode is going to start soon.

To make it even more obvious you could display a tooltip or a subtle non-distracting toast notification "keep pressing to start dragging".

This option is often used in video games (for example, opening chests and doors in Fortnite):

Another option is implementing some visual cue or animation for that. For example, making the element subtly progressively larger while being pressed to denote that something is about to happen. This way is used, for example, while starting drag on the springboard in iOS (here they make it seem as if icon sticks to the background and pressing it almost pulls it off of background to drag it):

]

Answer 2

On desktop, change the cursor from pointer to move after a delay:

Edit after the comment

For mobiles, there are two options:

• Add an icon that indicates draggable
• Show or hint the area where it can be dragged

_{More info at nngroup.com}