Drag and Drop with ASP.NET AJAX

I love reading great articles! The one I am posting today is simply deep and marvelous! Its written by the well known Jeff Prosise and is included in the last issue of MSDN Magazine.
In this article Jeff explains how to use drag and drop using ASP.NET Ajax Extensions with new Visual Studio. Here is a small part of it, at the end there is a link to the whole article:

fig01 Drag and Drop with ASP.NET AJAXAJAX has revolutionized Web user interfaces, and ASP.NET AJAX has made AJAX available to the Visual Studio® users. It comes in three separate downloads: ASP.NET AJAX Extensions (asp.net/ajax/downloads), which provides the core, fully tested set of AJAX functionality; ASP.NET AJAX Futures (asp.net/downloads/futures), which contains experimental features on which the product group wants feedback; and the ASP.NET AJAX Control Toolkit (asp.net/ajax/ajaxcontroltoolkit/samples), which provides a grab bag of AJAX controls as well as an SDK for building controls of your own.

Of the three, the Futures release has garnered the least attention from the developer community. That’s unfortunate because, more than providing a glimpse into what future versions of ASP.NET AJAX might look like, the Futures Community Technology Preview (CTP) is chock full of features that can be used to build cutting-edge Web apps today. A case in point is drag-and-drop.

Hidden away inside the Futures PreviewDragDrop.js file lies support for rich, browser-based drag-and-drop user interfaces. The model 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. The Futures drag-drop manager is an instance of a JavaScript class named Sys.Preview.UI._DragDropManager, which is automatically instantiated and made available through a global variable named Sys.Preview.UI.DragDropManager.

For months now, I’ve been meaning to write a sample showing how to use PreviewDragDrop.js to implement real drag-drop, featuring custom drag sourcing and custom drop targeting. I finally got around to it, and the results are pretty cool. I learned quite a lot about DragDropManager in the process, including how to enhance it by adding support for custom drag visuals. 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 for Web UIs.
read original


Leave a Reply

Your email address will not be published. Required fields are marked *