Drag Handle

Learn more about drag handles

What is a drag handle?

A drag handle is a small icon used to indicate that drag and drop and other draggable functions are supported within a UI – especially on iOS and Android devices. Framer’s drag handle interaction allows you to resize windows as you please, and with a minimum of fuss; simply grab, drag, and release.

Sometimes also called a handlebar, the main advantage of a drag handle is that it allows fast and direct customization of a 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 icon. In effect, then, selecting the drag handle is like telling the app that clicking and dragging actions should momentarily be interpreted differently.

In order for drag handles to be truly beneficial for users, they should be clearly indicated by a unique 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.