Drag & Drop: Examples

The Drag & Drop Utility allows you to create a draggable interface efficiently, buffering you from browser-level abnormalities and enabling you to focus on the interesting logic surrounding your particular implementation.

• Basic Drag and Drop: This example demonstrates the basics of drag and drop.
• Using Handles: This examples shows how to define drag handles.
• Dragged Element on Top: Demonstrates how to use Drag & Drop's event API to force a dragged element to draw on top of the other drag-and-drop elements.
• Using a Proxy Element: Demonstrates the built-in proxy-drag feature of drag and drop.
• Reordering a List: Demonstrates how to use drag and drop to reorder a list.
• Using Interaction Groups: Demonstrates how to use multiple drag-and-drop interaction groups.
• Custom Click Validator: Demonstrates one way to implement a draggable panel.
• Staying in a Region: Demonstrates one way to implement dragging elements in a Region.
• Using the Drag Shim: This example shows the use of the drag shim when dragging nodes over other troublesome nodes.

Other YUI Examples That Make Use of the Drag & Drop

• Reorder Rows with Drag and Drop (included with examples for the DataTable Control)