Best way to indicate "draggability" in a web app (or in general)?
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)
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