MSDN Magazine - January 2008 - (Page 111)

Drag and Drop with ASP.NET AJAX JEFF PROSISE A JAX 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 cuttingedge 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. Figure 1 DragDropDemo.aspx in Action Drag-Drop in Action Before I dive into the code, take a moment to download the sample project that accompanies this article and give it a quick run-through. Open it using the Visual Studio Open Web Site The Futures release includes early experimental versions of features currently being considered for future versions of ASP.NET and the .NET Framework. All information and functionality is subject to change. command and then view the home page, DragDropDemo.aspx, in your browser. To run this sample, you must have ASP.NET AJAX Extensions installed. You don’t have to download and install the Futures CTP because it’s already in the site’s Bin folder. You’ll see five color swatches at the top of the page and an empty box labeled “Drop It Here” at the bottom (see Figure 1). The color swatches are drag sources, and the empty box is the drop target. Grab one of the color swatches with your mouse and drag it down to the box. Observe how the box changes color from white to light gray when the cursor enters it, a feature known as drop-target highlighting. Now drop the color swatch over the box. The box changes color to match the swatch. Grab another color swatch and move it around the screen. Notice that the swatch can only be dropped over the drop target, and that the cursor indicates whether a drop would be accepted if it occurred right now. Also notice that as you drag a color swatch, a partially transparent rendition of the swatch—a “drag visual”—follows the cursor so you can see what you’re dragging. As you’ll see shortly, you write the code to create the drag visual, but ASP.NET AJAX handles everything else, including moving the drag visual with the cursor and updating the cursor with each mouse movement. The custom logic that drives this page is located in a script file named ColorDragDrop.js in the Web site’s Scripts folder. Colorjanuary2008 111 http://asp.net/downloads/futures http://asp.net/ajax/ajaxcontroltoolkit/samples http://asp.net/ajax/ajaxcontroltoolkit/samples

Table of Contents Feed for the Digital Edition of MSDN Magazine - January 2008

MSDN Magazine - January 2008 Contents Toolbox CLR Inside Out Data Points Advanced Basics Cutting Edge IIS 7.0 - Enhance Your Apps with the Integrated ASP.NET Pipeline World Ready - Around the World with ASP.NET AJAX Applications WCF Syndication - HTTP Programming with WCF and the .NET Framework 3.5 Wicked Code Foundations Extreme ASP.NET {End Bracket}

MSDN Magazine - January 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.