YUI Library Home

YUI Library Examples: Drag & Drop: Basic Drag and Drop

Drag & Drop: Basic Drag and Drop

This example demonstrates basic features of the Drag & Drop Utility.

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"></div>
  2. <div id="dd-demo-2" class="dd-demo"></div>
  3. <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.

  1. (function() {
  2. var dd, dd2, dd3;
  3. YAHOO.util.Event.onDOMReady(function() {
  4. dd = new YAHOO.util.DD("dd-demo-1");
  5. dd2 = new YAHOO.util.DD("dd-demo-2");
  6. dd3 = new YAHOO.util.DD("dd-demo-3");
  7. });
  8. })();
(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");
    });
})();

Configuration for This Example

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.

YUI Logger Output:

Logger Console

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.

Reload with logging
and debugging disabled.

More Drag & Drop Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

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