Search code examples
javascripthtmlcssdraggablejquery-ui-sortable

Intuitive Sortable and Draggable UI indicators


I've got elements which i can sort and elements which I can drag and drop into container and back. How should I show to users that some elements can be sorted and some of them are draggable (so I also need to show drop area, which I can just highlight while dragging)?

In jQuery Sortable UI demo I see double-arror indicator, on some sites there are two column dotted dash.

Share your experience, please


Solution

  • The problem, at this stage at least, is that dynamic-reordering of lists, etc. is a relatively new concept for most people... there doesn't seem to be any real convention surrounding the issue, as there is for more established interactions like buttons, checkboxes, etc.

    I would tend to suggest that anything that represents that the item might be 'grab-able' or 'sortable' would be an excellent idea. Arrows work, as do the ridged handles on iOS (three horizontal, inset bars) - but neither is inherently obvious. As always, real-world mapping is the ideal here... but as practically everything in the 'real world' is manipulable, it makes the task rather more difficult. There's nothing that truly maps from the real world to a UI to show 'ability to be dragged'.

    Whatever you decide to use, you're probably going to have to provide some advice to your end-user on what the symbols mean (perhaps a tool-tip, or a simple once-off notification)... as it's not always immediately obvious. Personally, I'd probably go with the JQuery-style arrows to show the list as sortable (but it still doesn't really highlight the possibility of a drag interaction... do I click the arrows to move them, or do I click and drag, or is there some other mechanism?).