Friday, February 15, 2019

drag n drop - What is the best icon to show that something can be dragged and reordered?


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:


enter image description here


enter image description here


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.


enter image description here


...or 3 bars indicating a similarly grippable area:


enter image description here


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:


enter image description here


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:


enter image description here


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...