Drag Handle

Learn more about drag handles

What is a drag handle?

It is a small draggable icon used to indicate that drag and drop cursors and other draggable functions are supported within a UI – especially on iOS and Android devices.

The act of dragging icons is virtually as old as we’ve had mouse functionality on computers. Whether we’re moving icons around a desktop background, rearranging our browser tabs, or organizing email threads into folders, these very simple functions carry with them a lot of complex nuances.

Framer’s drag handle interaction allows you to resize windows as you please, and with a minimum of fuss; simply grab, drag, and release.

The advantage of drag and drop UI design

Sometimes also called a handlebar, the main advantage of a drag handle is that it allows fast and direct customization of a drag and drop UI on the fly – without the need to delve into complex menus or activate a separate editing mode. This pattern should be employed within UI design whenever users might potentially wish to alter the size of two discrete windows in relation to each other. Clicking in the space between the two panels will activate the drag handle, meaning that the user is now free to alter window size as they wish.

Although drag handles are also useful on desktop, they are basically essential on touch-based devices. Here a UI cannot ordinarily be adjusted or customized during general use, as to do so would render basic actions such as as clicking, zooming, selecting etc. totally impractical. But with the addition of a drag handle, users are free to navigate normally, and then rearrange the interface whenever needed simply by grabbing the drag and drop icon. In effect, then, selecting the drag handle is like telling the app that clicking and dragging actions should momentarily be interpreted differently.

Best practices for drag handles

In order for drag handles to be truly beneficial for users, they should be clearly indicated by a unique drag and drop icon; designed and positioned in such a way that they are not at risk of being moved accidentally; and yet be sufficiently large and easy to grab that it is convenient for the user to interact with them on a regular basis.

Another major best practice is to keep your drag handles consistent. All too often, interfaces play with different UX standards for their drag and drop templates, only to confuse viewers with drag handles that are different throughout the page. Sometimes a drag handle can look like three lines; sometimes three dots; sometimes four arrows forming a cross.

In a perfect world, a drag handle should be the same across all iterations of a page or feature. This way, the consistent design language will make the feature more intuitive for the user.

Another way to signpost when users can drag and drop something is to make the cursor change form when it hovers over a drag handle; this can easily show the user that the drag option is available.

Furthermore, once the user grabs an object by the drag handle, having some kind of feedback is immensely useful. This can take the following forms:

• A contrasting color
• An outline
• Drop shadows or other indicators that the object is ‘above’ the others
• Angles or indentation to offset the object
• Translucent ‘ghost’ images as it is moved (e.g. when a folder is moved)

With these best practices, a drag handle feature can really enhance your users’ ability to customize their UI.