This example demonstrates how to use drag handles to control the specific places within an element from which a drag can be initiated.
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 | ? |
Note: Logging and debugging is currently turned off for this example.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings