Wednesday, September 10, 2008

Making use of the 'Drop" in Drag-and-Drop in ASP.NET/AJAX

I find it a lot when developers get asked what is AJAX, a very common answer is - it's that technology that let's you drag and drop things without leaving the page.

Working within the .NET 2.0 or the 3.5 framework, there is functionality in the AJAX toolkit that let's you drag things using the DragPanel control in the AJAX control toolkit (http://www.asp.net/AJAX/AjaxControlToolkit/Samples/DragPanel/DragPanel.aspx). Very cool stuff if all you are trying to do is allow the user to reposition things. If you are trying to extend it for a more practical use, like being able to drag an item to a shopping cart, you don't really get that functionality out of the box with the AJAX control toolkit.

Looking at our objective from a 64,000 ft. view, we have this "hot" zone somewhere on a page. We have a couple of objects that can be dragged onto this zone, and when that happens, we want to be notified exactly what was dragged and to which zone, so that we can fire the appropriate code, such as add the object to our shopping cart.

How do we accomplish this given that this functionality is non-existent in the AJAX control toolkit? I was asking myself this question until I ran across a very cool solution by Jeff Prosise who writes for a section in the MSDN Magazine called Wicked Code. You can subscribe to it here: http://msdn.microsoft.com/en-us/magazine/rss/?col=Wicked%20Code

The caveat with his solution is that it uses the Microsoft.Web.Preview library which comes as part of ASP.Net Futures (downloadable from here - http://www.microsoft.com/downloads/details.aspx?FamilyId=A5189BCB-EF81-4C12-9733-E294D13A58E6&displaylang=en). The official description of the ASP.Net Futures is "Contains features currently being considered for future versions of ASP.NET and the .NET Framework," meaning you probably won't find too much documentation or support for it... or a guarantee of any sort that it will be included in the next release of the .NET Framework.

There is the fine print. If you are planning on deploying this to a high volume enterprise environment, it's certainly something to think about, however, Jeff's solution looks elegant, robust, and customizable to fit your need.

The code, article, and documentation is available here:

Great work Jeff!
Applies to:

No comments: