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> 
view plain | print | ?

Now we create the instances of YAHOO.util.DD, passing the element ids or references for our demo elements.

1<script type="text/javascript"
2    (function() { 
3        var dd, dd2, dd3; 
4        YAHOO.util.Event.onDOMReady(function() { 
5            dd = new YAHOO.util.DD("dd-demo-1"); 
6            dd2 = new YAHOO.util.DD("dd-demo-2"); 
7            dd3 = new YAHOO.util.DD("dd-demo-3"); 
8        }); 
9    })(); 
10</script> 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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