Best way to indicate "draggability" in a web app (or in general)? [closed]

Question

Are there any visual cues that you know of that indicate an item's "draggability"?

The obvious ones:

• "<marque>Click here to drag!</marque>"
• an icon
• and (which I plan to implement) the closed-hand-cursor-onmouseover

Thanks for you help!

Answer 1

I really cannot explain why, but the drag background icon thingy on the iphone makes some sense to me. Its just threee horizontal lines. In a web application that I develop and sell, people understood that immediately (well, on a classical "mouse UI" the mouse pointer gfx also changes to the former one you mentioned, thats some very important additional clue for mouse user interfaces).

I also immediately associated it with a draggable thing! Just three horizontal lines...

But then it only makes sense for some sort of draggable row or line. I don't know what's your intended application requires in detail.

The background (just three simple horizontal lines): alt text http://manjadigital.de/demo/s/d/f/c/a/sortierer_greifer.gif

Example usage on iPhone:
_{(source: creativealgorithms.com)}

Answer 2

Modern browsers support a grab/grabbing cursor:

.dragHandle {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.dragHandle:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

For more info (and a IE failover) read: http://uihacker.blogspot.com/2011/01/css-grab-hand-cursor.html

Answer 3

When draggability isn't obvious (example 1 in your question), I usually look for "handles" on objects that look like places you can grab something. For example, there's one at the bottom of the Stack Overflow answer box to resize the text input.