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

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:

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

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

Drag & Drop Examples:

More Drag & Drop Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.