YUI Library Home

Site Search (YDN & YUIBlog):

# 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.

View example in new window.

## 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>

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

<script type="text/javascript"> (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"); }); })(); </script>

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Drag & Drop Examples:

- Basic Drag and Drop
- Using Handles
- Dragged Element on Top
- Using a Proxy Element
- Reordering a List
- Using Interaction Groups
- Custom Click Validator
- Staying in a Region
- Using the Drag Shim

### More Drag & Drop Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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