Yahoo! Developer Network Home - Help

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.

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:

1<div id="dd-demo-1" class="dd-demo"
2    <div id="dd-handle-1a" class="dd-multi-handle-1">H1</div> 
3    <div id="dd-handle-1b" class="dd-multi-handle-2">H2</div> 
4</div> 
5<div id="dd-demo-2" class="dd-demo"
6    <div id="dd-handle-2" class="dd-handle">H</div> 
7</div> 
8 
9<div id="dd-handle-3b" class="dd-outer-handle">Outer</div> 
10<div id="dd-demo-3" class="dd-demo"></div> 
view plain | print | ?

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.

1<script type="text/javascript"
2 
3(function() { 
4 
5    var dd, dd2, dd3; 
6    YAHOO.util.Event.onDOMReady(function() { 
7        dd = new YAHOO.util.DD("dd-demo-1"); 
8 
9        // Configure one or more child element as a drag handle 
10        dd.setHandleElId("dd-handle-1a"); 
11        dd.setHandleElId("dd-handle-1b"); 
12 
13        dd2 = new YAHOO.util.DD("dd-demo-2"); 
14        dd2.setHandleElId("dd-handle-2"); 
15 
16        dd3 = new YAHOO.util.DD("dd-demo-3"); 
17        dd3.setHandleElId("dd-handle-3a"); 
18 
19        // A handle that is not child of the source element 
20        dd3.setOuterHandleElId("dd-handle-3b"); 
21    }); 
22 
23})(); 
24</script> 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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