YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

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");

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings