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

This example shows users how to combine the Drag and Drop Utility with the Datatable widget to easily re-order table rows. There are some cases where the initial ordering of rows doesn't produce the desired output, but with this example we illustrate how users can manually order data by simply dragging and dropping to rearrange the rows.

Making your rows draggable

In order to make your rows draggable, the only thing you need to do is to subscribe to the cellMousedownEvent, then operate on the target row with a custom handler. In this case, onRowSelect is the function we have defined to do all the row dragging.

Our function, onRowSelect, will create a DDProxy for each row we are trying to drag. We define the custom action for all the predefined DD interesting moments: startDrag, endDrag and onDragOver.

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.

Defining your targets

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

Also, it's important to know that whenever a drag/drop operation occurs, DataTable fires a "rowAddEvent" event, which is used to trigger the creation of that new row as a drag target:

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

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