YUI Library Home

YUI Library Examples: Drag & Drop: Reordering a List

Drag & Drop: Reordering a List

This example demonstrates how to create a list that can have the order changed with the Drag & Drop Utility.

List 1

  • list 1, item 1
  • list 1, item 2
  • list 1, item 3

List 2

  • list 2, item 1
  • list 2, item 2
  • list 2, item 3

Drag and Drop List Ordering

The YUI Drag & Drop Utility lets you make HTML elements draggable.

In this example, list reordering is implemented by extending YAHOO.util.DDProxy instead of YAHOO.util.DD so that we can use the source element as the "insertion point". When the drag starts, the proxy element style and content is adjusted to match the source element, and visibility:hidden is applied to the source element.

To facilitate dragging into an empty list, we make the two list elements DDTargets. When interacting with the list items, we will get two notifications (one for the list, one for the list item). We ignore all dragOver events that happen on the list and ignore all dragDrop events unless the drop was in the list's negative space (not over another list item).

Create the elements:

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

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.

Copyright © 2011 Yahoo! Inc. All rights reserved.

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