Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

# YUI Library Examples: Drag & Drop: Drag and Drop Handles

# Drag & Drop: Drag and Drop Handles

This example demonstrates how to use drag handles to control the specific places within an element from which a drag can be initiated.

View example in new window.

H1
H2
H
Outer

## Basic Drag and Drop

The YUI Drag and Drop Utility lets you make HTML elements draggable.

For this example, we will enable drag and drop for the three `<div>` elements.

Create the `demo` elements:

<div id="dd-demo-1" class="dd-demo"> <div id="dd-handle-1a" class="dd-multi-handle-1">H1</div> <div id="dd-handle-1b" class="dd-multi-handle-2">H2</div> </div> <div id="dd-demo-2" class="dd-demo"> <div id="dd-handle-2" class="dd-handle">H</div> </div> <div id="dd-handle-3b" class="dd-outer-handle">Outer</div> <div id="dd-demo-3" class="dd-demo"></div>

Now we instantiate three `YAHOO.util.DD` instances. By default, a `mousedown` on any part of source element would start a drag operation. We use `setHandleElId` to make it so that only a specific area or areas of the source element will start a drag when clicked.

Elements that are not a child of the source element can be used as drag handles by using `setOuterHandleElId`. <script type="text/javascript"> (function() { var dd, dd2, dd3; YAHOO.util.Event.onDOMReady(function() { dd = new YAHOO.util.DD("dd-demo-1"); // Configure one or more child element as a drag handle dd.setHandleElId("dd-handle-1a"); dd.setHandleElId("dd-handle-1b"); dd2 = new YAHOO.util.DD("dd-demo-2"); dd2.setHandleElId("dd-handle-2"); dd3 = new YAHOO.util.DD("dd-demo-3"); dd3.setHandleElId("dd-handle-3a"); // A handle that is not child of the source element dd3.setOuterHandleElId("dd-handle-3b"); }); })(); </script>

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### Drag & Drop Examples:

- Basic Drag and Drop
- Drag and Drop Handles
- Drag and Drop with the Dragged Element on Top
- Drag and Drop using a Proxy Element
- Using Drag and Drop to Reorder a List
- Drag and Drop Interaction Groups
- Drag and Drop - Custom Click Validator
- Drag and Drop - Staying in a Region

### More Drag & Drop Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings