Drag and Drop Programming in Microsoft ASP.NET AJAX

Position

Name

Features

Server side

DragOverlayExtender

Note that in the newest Futures CTP, this control is not explicitly contained within the PreviewScript.js file, but you can still find it inside the Microsoft.Web.Preview.dll assembly using the .NET Object Browser. This control provides only the dragging function without dropping support, which means that you can drag it wherever you want but without a special position to drop onto, not to mention the custom function. I've provided a sample web page named DragOverlayExtenderDemo.aspx in the source code with this article.

DragPanelExtender

When you use the DragOverlayExtender control, you can drag any position of the target. However, users often need to select the text within the control by dragging, which obviously conflicts with the general dragging operation so that users are deprived of the normal right of selecting text. The practical way to drag involves dragging some special area of the target as with the common Windows dragging operation. The DragPanelExtender control in the ASP.NET AJAX Control Toolkit provides just this function but with little extensibility and availability. In the source code I've also supplied a related demo of it (the DragPanelDemo.aspx page) for you to refer to.

ReorderList

Inside the ASP.NET AJAX Control Toolkit. This address provides you with a good example (I've tested it successfully). Compared with the above two controls, this control provides more functions and is more extensible. However, when we want to drag items among more than two controls of this kind, it's quite difficult to make it work.

WebParts

This in fact refers to a group of related server-side controls -- WebPartManager, WebPartZone, CatalogZone, EditorZone, etc. -- with which you can easily build a web site much like Windows Live Spaces which enables end users to open, close, minimize, maximize or drag the customized gadgets on the page. Since now there are many samples with these controls, we won't dwell on them further.

Client side

DragDropList

This control stays within the  PreviewDragDrop.js file (in ASP.NET AJAX Futures CTP). This address provides you with a good example (I've tested it successfully).

Thanks to its functions being totally implemented on the client side, the performance of the server side has been improved. With its rich functions you can even achieve the same effects as those of the WebParts; however, it lacks good extensibility and it is difficult to make the dragging result persist.

WebParts

Also shipped with ASP.NET AJAX Futures CTP, there is a PreviewWebParts.js file which aims to simulate the server side WebPart action. Despite the good drag and drop support and many other strong points, the server side WebParts still has two fatal limitations:

• only supports IE;
• Every time users change the gadget's position, the current page will automatically trigger a post back to the server to persist the current configuration.

The first problem can be solved using the client side WebParts in ASP.NET AJAX Futures CTP, while the second can be overcome with the famous UpdatePanel control. All of these were well done in the former ASP.NET AJAX CTP version, but in the current Futures CTP these problems crop up, making a programmer's life more difficult. Why??

IDragSource and IDropTarget

This is the most complicated client side drag and drop solution supplied by MS AJAX. In fact, the above DragDropList has just utilized this approach by implementing the interfaces IDragSource and IDropTarget; it, however, has just scratched the surface of this powerful approach. In the next section, we'll further explore the underground mechanism of this solution.