Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing

Smart Components

Social App
Music Player
To Do App

Magic Motion

Photo View
Tab Navigation
Card List
Mobile Carousel
Floating Action Button
Dynamic Grid
Expandable Menu
Image Gallery
Image Gallery 2
Magic Motion
Reels: Drag
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Window
Side Menu

Components

Input Form
Loading Indicator
Radio Buttons
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Carousel Design
Drop on Scroll
Image Panning
Input Data
Input Validation
Like Animation
Press-And-Hold
Nested Scroll
Progress Bar Design
Show Password
Star Rating
Stories: Tap
Swipe Menu
Switch Sheet
Menu Tab
Toast Prompt
Wheel Picker

Effects

Cover Flow
3D Carousel
Flip Animation
Parallax Effect
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Custom Effect
Drag Handle
Dynamic Header
Like Counter
Scroll Progress
Slider

Drag Handle

Open in Framer to interactPreview this example

Quickly resize two panels with a drag handle.

Open in FramerPreview Example

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.

Resources
  • Interactions Support
  • Transitions Support
  • Talk about this on Discord

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement