YUI Library Home

YUI Library Examples: DataTable Control: Reorder Rows with Drag and Drop

DataTable Control: Reorder Rows with Drag and Drop

Reorder rows of a DataTable with Drag and Drop.

Re-orderable table rows

The DDRows class defined in this example allows users to easily re-order table rows. There are some cases where the initial ordering of rows doesn't produce the desired output. By using this DDRows class, users can manually order data by simply dragging and dropping to rearrange the rows.

The DDRows class

The DDrows class extends the DDProxy class, so that it can will use proxy elements for all the dragging operations.

Initializing draggability

A custom init event handler is attached to make a DataTable's rows draggable:

Also, it’s important to know that whenever a drag/drop operation occurs, DataTable fires a "rowAddEvent" event, which is used to re-attach the dragdrop object to the newly created table row.

Interesting DD moments

startDrag:
This is when the proxy element gets created and the source element we’re dragging gets cached.
endDrag:
We adjust the visibility of the proxy and drag elements.
onDrag:
Determine the direction the drag element is going.
onDragOver:
This is when row and data order manipulation happens. As a table row is dragged over another table row, the two elements and underlying data get swapped.

Sample Code for this Example

Data:

CSS:

Markup:

JavaScript:

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 © 2010 Yahoo! Inc. All rights reserved.

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