I'm using jquery's draggable and droppable to enhance the usability of a wireframe stack in our application, and I've already adjusted the cursor to the CSS move glyph to indicate as much.

I'd like to make it more obvious though by using a textured area to the left of each box/row, and limiting the cursor change to only during a rollover of that area.

The reason being, the textured area would always be a visible indicator of the feature and is quite recognizable, whereas the mouseover means the user has to notice the mouse icon and interpret it's changed glyph.

The problem is, I'm doing searches for everthing from grab point texture to drag area button to the kitchen sink, and I can't find any. I'd like to see a variety before I select the one that best suits our purpose.

Are there any resources or best practices for the textures to use for such a grab point area?


Use vertical parallel lines when dragging horizontally and viceversa.

enter image description here

Update: as per new information the items are draggable horizontally and vertically. In this case a grid of dots will convey better the idea of dragging in any direction, like this screen shot

enter image description here


| improve this answer | |
  • Our blocks are draggable both vertically and horizontally so one or the other doesn't quite cover both... the closest I've been able to gleen has been a grid of dots, but I haven't been able to find any sprites or texture png's out there which is what I'm really looking for, something in a similar context to ours where the graphic is small but noticeable. – oucil Feb 28 '14 at 13:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.