40 Chapter 2: Drag and Drop
Tip For Drag and Drop Modules, use the module’s midpoint to control the drop targeting.
Of the various approaches for Drag and Drop Modules, iGoogle combines the best approaches into a single interface: Placeholder targeting Most explicit way to preview the effect. Midpoint boundary Requires the least drag effort to move modules around. Full-size module dragging Coupled with placeholder targeting and midpoint boundary detection, it means drag distances to complete a move are shorter. Ghost rendering Emphasizes the page rather than the dragged object. Keeps the preview clear.
Best Practices for Drag and Drop Module Here are some best practices to keep in mind: • • • •
Use the placeholder approach when showing a clear preview during drag is important. Use the insertion bar approach when you want to avoid page jitter. Use the midpoint of the dragged object to determine drag position. Use a slightly transparent version of the object being dragged (ghost) instead of an opaque version. • If you drag thumbnail representations, use the insertion bar targeting approach.
Drag and Drop List Rearranging lists is very similar to rearranging modules on the page but with the added constraint of being in a single dimension (up/down or left/right). The Drag and Drop List pattern defines interactions for rearranging items in a list. 37 Signal’s Backpackit allows to-do items to be rearranged with Drag and Drop List (Figure 2-18).