This example demonstrates basic features of the Drag & Drop Utility.
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> <div id="dd-demo-2" class="dd-demo"></div> <div id="dd-demo-3" class="dd-demo"></div>
<div id="dd-demo-1" class="dd-demo"></div> <div id="dd-demo-2" class="dd-demo"></div> <div id="dd-demo-3" class="dd-demo"></div>
Now we create the instances of YAHOO.util.DD
, passing the element ids or references for our demo elements.
(function() { var dd, dd2, dd3; YAHOO.util.Event.onDOMReady(function() { dd = new YAHOO.util.DD("dd-demo-1"); dd2 = new YAHOO.util.DD("dd-demo-2"); dd3 = new YAHOO.util.DD("dd-demo-3"); }); })();
(function() { var dd, dd2, dd3; YAHOO.util.Event.onDOMReady(function() { dd = new YAHOO.util.DD("dd-demo-1"); dd2 = new YAHOO.util.DD("dd-demo-2"); dd3 = new YAHOO.util.DD("dd-demo-3"); }); })();
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
INFO 787ms (+0) 9:13:30 PM:
DD dd-demo-3
dd-demo-3 initial position: 393, 288
INFO 787ms (+0) 9:13:30 PM:
DD dd-demo-2
dd-demo-2 initial position: 253, 420
INFO 787ms (+1) 9:13:30 PM:
DD dd-demo-1
dd-demo-1 initial position: 113, 302
INFO 786ms (+41) 9:13:30 PM:
DD loggerDiv
loggerDiv initial position: 8, 1356
INFO 745ms (+2) 9:13:30 PM:
global
id is not a string, assuming it is an HTMLElement
INFO 743ms (+104) 9:13:30 PM:
LogReader instance0
LogReader initialized
INFO 639ms (+639) 9:13:29 PM:
DragDropMgr
DragDropMgr onload
INFO 0ms (+0) 9:13:29 PM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings