I am using jquery UI sortable to allow rows in an html table to be sortable. I want to use an icon for a handle and I am trying to figure out what is the best image / icon that would best illustrate that a user can drag this element to drag the current row above or below other rows. My mouse is already changing cursor to show:
.handle {
cursor: move;
}
to represent that you can drag so I am trying to figure out how important the image matters at all.
Here were some suggestions:
but when I look at these, my instinct is to click the up or down arrow (versus have this represent something to drag?)
Answer
I typically use a grippy looking dotted area like this, that's also roughly the size/shape of a fingertip.
...or 3 bars indicating a similarly grippable area:
The idea being to make it look like the surface of the button itself stippled or embossed - and so making it more connected to the whole button rather than being a separate function or action.
Here's a close up of the dots:
Another common symbol is one like this screenshot from Basecamp. Note that here the icons on the left of the list item only appear as you hover over the item, which means that particular behaviour wouldn't work on mobile:
No comments:
Post a Comment