YUI: DragDrop DataTable
Folder 1
Folder 2
Folder 3
Folder 4
Folder 5
Folder 6
Folder 7
The Code
(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, ddRow = null, overLi = null, selectedRow = null, thisStatus = Dom.get('status'); var myColumnHeaders = [ {key:"SKU", sortable: true } , {key:"Quantity", sortable: true }, {key:"Item", sortable: true }, {key:"Description",sortable: true } ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: ["SKU","Quantity","Item","Description"] }; var myDataTable = new YAHOO.widget.DataTable("datatable", myColumnSet, myDataSource, { sortedBy:{ colKey: "Item", dir: "desc" }, rowSingleSelect: true }); myDataTable.subscribe("cellMousedownEvent",myDataTable.onEventSelectRow); var onRowSelect = function(ev) { thisStatus.innerHTML = ''; var par = myDataTable.getTrEl(Event.getTarget(ev)); //The tr element selectedRow = myDataTable.getSelectedRows(); ddRow = new YAHOO.util.DDProxy(par.id); ddRow.handleMouseDown(ev.event); ddRow.onDragOver = function() { Dom.addClass(arguments[1], 'over'); if (overLi && (overLi != arguments[1])) { Dom.removeClass(overLi, 'over'); } overLi = arguments[1]; } ddRow.onDragOut = function() { Dom.removeClass(overLi, 'over'); } ddRow.onDragDrop = function(ev) { thisStatus.innerHTML = 'You dropped this row (' + selectedRow + ') on this li (' + Dom.get(overLi).innerHTML + ')'; Dom.removeClass(overLi, 'over'); myDataTable.unselectAllRows(); YAHOO.util.DragDropMgr.stopDrag(ev,true); Dom.get(this.getDragEl()).style.visibility = 'hidden'; Dom.setStyle(this.getEl(), 'position', 'static'); Dom.setStyle(this.getEl(), 'top', ''); Dom.setStyle(this.getEl(), 'left', ''); } }; myDataTable.subscribe('cellMousedownEvent', onRowSelect); var lis = Dom.get('folders').getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { new YAHOO.util.DDTarget(lis[i]); } })();