The GridView Row Drag Overlay Extender

I finally got a chance to play with the Ajax futures release over the weekend.  The controls look very impressive!
Just for fun, I wrote a simple drag overlay extender that allows you to drag and drop rows in/across  GridViews.



Anytime a Gridview row is dragged and dropped onto another row or header, a post back occurs raising a RowDrop event with details about the rowIndex and GridView where the drag started and where it was dropped onto.

Initially, the drag in IE 6/7 was sluggish. It looks like when you register a drop target using the Sys.Preview.UI.DragDropManager.registerDropTarget method, a reference to the DOM element is stored in an internal array. When a drag is in progress, IE continuously loops through the array of registered dropped  targets looking for a potential drop target. This is done by calculating the bounds of each element in the array with the help of the Sys.UI.DomElement.getBounds method. This seemed to make IE sluggish.

The workaround I have in the sample code, which should work in most simple scenarios, is to store the bounds of each element as an expando property of the element so that on subsequent loops, it is fetched from the property rather than being calculated again. The sample contains the original implementation and the one with the tweak. The tweak is stored in a js file in the Scripts folder.

Note that the Ajax Control Toolkit already contains a cool ReorderList control.

You can download my sample here (don't forget to build it first :)
Primary

Mirror

Note again that it uses the Ajax Futures Relese (May 2007).