Drag-Drop in ASP.NET AJAX

One of the most interesting characteristics of ASP.NET AJAX is that the client half (the Microsoft AJAX Library) is full of features not exposed by the server half (the ASP.NET 2.0 AJAX Extensions). A case in point is drag-drop. The DragOverlayExtender control in the ASP.NET AJAX Futures CTP makes it extremely easy to convert static HTML elements into floating elements. However, DragOverlayExtender is next to useless in the real world, because it offers no control over when and where drops occur or other essential drag-drop semantics.

Ironically, the Microsoft AJAX Library contains support for rich, interactive drag-drop operations. The model that it uses is patterned after the old OLE drag-drop model, in which drag sources implement the IDragSource interface, drop targets implement the IDropTarget interface, and the system provides a drag-drop manager to connect drag sources to drop targets. In ASP.NET AJAX, the drag-drop manager is an instance of a class named Sys.Preview.UI._DragDropManager, which is automatically instantiated and made available through a global variable named Sys.Preview.UI.DragDropManager. The problem with DragOverlayExtender is that it’s little more than a wrapper around Sys.Preview.UI.FloatingBehavior, which in turn uses DragDropManager but exploits only a fraction of its capabilities.

A better example of the kinds of drag-drop scenarios that DragDropManager enables is found in the ASP.NET AJAX Control Toolkit. The ReorderList control uses what is essentially a copy of DragDropManager to implement a list whose items can be rearranged using drag-drop. (It uses a toolkit-specific version of DragDropManager rather than the one in the Futures CTP so the toolkit can be used without the CTP.)

For months now, I’ve been meaning to write a sample showing how to use DragDropManager to implement real drag-drop featuring custom drag sourcing and custom drop targeting. I finally got around to it today, and the results are pretty cool. I learned quite a lot about DragDropManager in the process, including the rather peculiar way in which it handles custom drag visuals and what appears to be a bug in its logic for canceling pending drops using the Esc key. Once you’re familiar with the model (and comfortable with the concept of deriving classes and implementing interfaces in JavaScript), DragDropManager opens up a whole new world of possibilities. There are too many for me to blog about here, but you can bet I’ll be writing about them in MSDN Magazine.

If you happen to be in London next week for DevWeek, I’ll be presenting my custom drag-drop sample and walking through the code in Monday’s ASP.NET AJAX workshop.