Cool code-use ASP.net ajax for drag-and-drop

Ajax is a change to the Web user interface, and ASP.net Ajax enables Ajax to be used by Visual studio® users. Its downloads are divided into three separate sections: ASP.net ajax Extensions (asp.net/ajax/downloads), which provides a core set of AJAX features and has been thoroughly tested; ASP.net ajax futures (asp.net /downloads/futures), contains some experimental features that the product group would like to receive feedback about these features, and ASP.net AJAX control Toolkit (asp.net/ajax/ajaxcontroltoolkit/ samples), providing a variety of AJAX controls and an SDK that you can use to build your own controls.

Of these three downloads, the futures version is the least noticed in the developer community. This is really regrettable because the Futures Community Technology Preview (CTP) Not only provides the potential for a future version of ASP.net AJAX, but also includes all the features that can be used to build today's most cutting-edge Web applications. Drag-and-drop is a related example.

The futures Previewdragdrop.js file implicitly provides rich support for browser-based drag-and-drop user interfaces. The model used is based on the original OLE drag-and-drop model, where the IDragSource interface is implemented by the drag source, the IDropTarget interface is implemented by the drop target, and the system also provides a drag-and-drop manager that connects the drag source to the drop target. The futures drag-and-drop manager is an instance of a JavaScript class, named Sys.preview.ui._dragdropmanager, that is automatically instantiated and passed through a named Sys.Preview.UI.DragDropManager For use with global variables.

In recent months, I've been trying to write an example of how to use previewdragdrop.js to implement real drag-and-drop, which is characterized by custom drag sources and custom drop targets. At last I finished the work and the result was great. In the process I learned a lot about Dragdropmanager, including how to enhance its functionality by adding support for custom drag visuals. Once you are familiar with the model (and understand the concepts of deriving classes and implementing interfaces in JavaScript), Dragdropmanager opens a whole new world for the use of the Web user interface.

Running drag-and-drop

Before delving into the code, take a moment to download the sample project that came with this article and run it quickly. Open the example with the Open Web Site command in Visual Studio, and then view the home page dragdropdemo.aspx in the browser. To run this example, you must first install the ASP.net AJAX Extensions. You do not need to download and install the Futures CTP because it is already in the Bin folder of the site.

You will see five color swatches at the top of the page and a blank box labeled "Drop It here" at the bottom of the page (see Figure 1). The color swatch is the drag source, and the blank box is the drop target. Use the mouse to get one of the color swatches, and then drag and drop them into the box below. When the cursor enters the box, observe how the color of the box changes from white to light gray, which is called the placement target highlighting feature. Now, put the color swatch in the box. The box changes to the same color as the sample.

Figure 1dragdropdemo.aspx in Action

Get another color swatch and move around on the screen. Note that the sample can only be placed on the drop target, and the cursor indicates whether the sample can be placed at this time. Also note that when you drag a color swatch, a translucent representation of a sample moves with the cursor, which is "drag visual effects," so you know what you're dragging. As you'll see later, we write code to create drag visuals, while ASP.net AJAX completes all the rest of the work, including letting the drag visual effect move with the cursor and updating the cursor with each mouse move.

The custom logic that drives this page is in a script file named Colordragdrop.js, which is located in the Scripts folder of the Web site. Colordragdrop.js is a custom script file loaded by ScriptManager. In fact, when you open dragdropdemo.aspx in Source view, you can see that ScriptManager loaded three script files: previewscript.js, including a key ASP.net AJAX base class used in this demo ; previewdragdrop.js, including drag-and-drop support for colordragdrop.js use; Colordragdrop.js itself.