DDRowsclass 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.
Reorder rows of a DataTable with Drag and Drop.
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.
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.
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:
init event handler is attached to make a DataTable's rows drag targets:
Note: Logging and debugging is currently turned off for this example.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.