Snap Drag Controls

Problem

Pixels are small and hands are big - it's hard to be precise with a mouse. Your target audience would want to precisely position items but would find it challenging and even frustrating to do without help.

Solution

Help people precisely position things where they want by creating a larger "magnetic" boundary in relation to potential targets.

HTML code here
	

CSS code here
	

Why

Magnetism functions primarily in terms of Fitt's Law by invisibly increasing the size of the target. Users often want to align things precisely, even to the pixel, or quickly position items on the edges of a view or in relation to each other. Doing this without help can be difficult. Magnetism helps by inferring the target based on proximity and some predetermined parameters that suggest likely targets. In general, it makes users feel more productive and causes applications to feel "smarter."

How

If your solution involves manual positioning of objects on a view, enhance the experience with magnetism. Determine if there are either common target areas for objects, such as:

• Edges of a view or screen
• Edges of objects of similar types that might want to be positioned adjacent to each other
• Grid lines or guide lines that people can specify or, even better, inferred guide lines based on the positions of existing objects in the view (to make aligning the objects easier without explicitly specifying a guide)
• Edges of objects that show on demand when the pointer is near them

Also consider that sometimes you want the magnetism to function as well when moving objects away from their targets. For instance, if you have a toolbar stuck to the edge of a view, you may want to require more than a couple pixels of dragging to undock it from the edge so that users don't accidentally undo alignments.

Examples