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

The code for the DDRows class and this example has been contributed to YUI by Gonzalo Cordero, Juku graduate and Front-End Engineer on the Yahoo! Flex Force team who is currently working on the next generation of Yahoo! homepage.

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:

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.ReorderRows = function() {
        var Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event,
            DDM = YAHOO.util.DragDropMgr,
            myColumnDefs = [
                {key:"id"},
                {key:"date", formatter:"date"},
                {key:"quantity", formatter:"number"},
                {key:"amount", formatter:"currency"},
                {key:"title"}
            ],
            myDataSource = new YAHOO.util.LocalDataSource(
                YAHOO.example.Data.bookorders,
                {responseSchema: {fields: ["id","date","quantity","amount","title"]}}
            ),
            myDataTable = new YAHOO.widget.DataTable("datatable", myColumnDefs, myDataSource, {caption:"YUI Datatable/DragDrop"}),
            myDTDTargets = {},
            onRowSelect = function(ev) {
                    var par = myDataTable.getTrEl(Event.getTarget(ev)),
                        srcData,
                        srcIndex,
                        tmpIndex = null,
                        ddRow = new YAHOO.util.DDProxy(par.id);

ddRow.handleMouseDown(ev.event);

/**
                    * Once we start dragging a row, we make the proxyEl look like the src Element. We get also cache all the data related to the
                    * @return void
                    * @static
                    * @method startDrag
                    */
                    ddRow.startDrag = function () {
                        proxyEl  = this.getDragEl();
                        srcEl = this.getEl();
                        srcData = myDataTable.getRecord(srcEl).getData();
                        srcIndex = srcEl.sectionRowIndex;
                        // Make the proxy look like the source element
                        Dom.setStyle(srcEl, "visibility", "hidden");
                        proxyEl.innerHTML = "<table><tbody>"+srcEl.innerHTML+"</tbody></table>";
                    };

/**
                    * Once we end dragging a row, we swap the proxy with the real element.
                    * @param x : The x Coordinate
                    * @param y : The y Coordinate
                    * @return void
                    * @static
                    * @method endDrag
                    */
                    ddRow.endDrag = function(x,y) {
                        Dom.setStyle(proxyEl, "visibility", "hidden");
                        Dom.setStyle(srcEl, "visibility", "");
                    };

/**
                    * This is the function that does the trick of swapping one row with another.
                    * @param e : The drag event
                    * @param id : The id of the row being dragged
                    * @return void
                    * @static
                    * @method onDragOver
                    */
                    ddRow.onDragOver = function(e, id) {
                        // Reorder rows as user drags

var destEl = Dom.get(id),
                            destIndex = destEl.sectionRowIndex;

if (destEl.nodeName.toLowerCase() === "tr") {
                            if(tmpIndex !==null) {
                                myDataTable.deleteRow(tmpIndex);
                            }
                            else {
                                myDataTable.deleteRow(srcIndex);
                            }

myDataTable.addRow(srcData, destIndex);
                        tmpIndex = destIndex;

DDM.refreshCache();
                        }
                    };
            };

myDataTable.subscribe('cellMousedownEvent', onRowSelect);

//////////////////////////////////////////////////////////////////////////////
        // Create DDTarget instances when DataTable is initialized
        //////////////////////////////////////////////////////////////////////////////
        myDataTable.subscribe("initEvent", function() {

var i, id,
                allRows = this.getTbodyEl().rows;

for(i=0; i<allRows.length; i++) {
                id = allRows[i].id;
                // Clean up any existing Drag instances
                if (myDTDTargets[id]) {
                     myDTDTargets[id].unreg();
                     delete myDTDTargets[id];
                }
                // Create a Drag instance for each row
                myDTDTargets[id] = new YAHOO.util.DDTarget(id);
            }
        });

//////////////////////////////////////////////////////////////////////////////
        // Create DDTarget instances when new row is added
        //////////////////////////////////////////////////////////////////////////////
        myDataTable.subscribe("rowAddEvent",function(e){
            var id = e.record.getId();

myDTDTargets[id] = new YAHOO.util.DDTarget(id);
        });
    }();
});

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.