: Design cues for draggable page components I'm working on a web project where a user will be able to edit the ordering of a list. I'd like to update the visuals for the items that are draggable

@Steve758

I would highly recommend using the open/closed hand cursor when manipulating on-screen objects. The open hand on hover, and the closed hand on mouse down and when dragging.



This standard is used in many popular applications, not the least of which is every Google app where dragging one or more objects is required (e.g., G-mail message list, a Google Map).

It is also the most forward-thinking standard. As touch-based interfaces become more prevalent, using hands instead of other types of controls (which are becoming archaic) is going to become more intuitive for people.

On a side note, I would also consider making sure that the dragable objects stand out as objects. In other words, they should have some volume and not just look like text on a wall, which in real life cannot be moved. The non-draggable object on the other hand, well they should appear like text on a wall, or like something else that cannot be moved.

I am also assuming that this application will be used by people continuously, not in a walk-up-and-use situation. Otherwise it's best to isolate the dragging step and give a little instruction like "Drag items to sort them".

Vote Up Vote Down

@RJPawlick971

If you can only drag them up or down, what I'd suggest is, on hover, to show an icon next to it along the lines of two arrows. Bad ASCII version:

/

/


Alternatively, a common cue is the 'grippers' you see to resize things like in the bottom corner of your web browser. Bad ASCII version:

///

Vote Up Vote Down

@Caterina889

for vertical dragging. Standard on mobiles so it should communicate well.

Or for completely draggable.

Vote Up Vote Down

@Speyer780

How about a dotted-line box around the item? You can always add a key at the top of the page.

Vote Up Vote Down