Summary of six implementation methods for ASP. NET Ajax (Atlas) drag-and-drop (Drag & Drop)

In AjaxProgramIt is not easy to implement the simple drag-and-drop function in traditional desktop programs. However, the drag-and-drop feature on the Web is so fascinating that almost every mature Ajax Class Library provides its own set of drag-and-drop encapsulation, Asp. net Ajax (Atlas) is no exception. This article will summarize and briefly analyze the six different implementation methods of the drag-and-drop feature in ASP. NET Ajax (Atlas), hoping to help friends select the methods most suitable for actual needs.

Among them, there are 1st to 4th solutions in my "ASP. net Ajax program design-Volume I: server-side ASP. NET 2.0 Ajax extensions and ASP. net Ajax Control Toolkit (published in April ).CodeAnd the illustration is also excerpted from the book. 5th solutions, which will be detailed in my book ASP. NET 6th Ajax programming-Volume II: client Microsoft Ajax Library (tentatively published in 2.0 ).

However, looking at these solutions, I am sorry to find that either simple to use, poor customization capabilities, or strong customization capabilities, but a lot of code needs to be written for use. We hope that the ASP. NET Ajax (Atlas) team can make persistent efforts to make this important function better. Or which of the following methods is missing? Ask your friends to help you.

 

[1] Use server-side dragoverlayextender or client-side dragoverlaybehavior

The server-side dragoverlayextender is implemented by the client dragoverlaybehavior. The former is the componentized encapsulation of the latter on the server, so we will discuss the two together.

This drag-and-drop function is very simple. In fact, it is only a drag-and-drop function, but not a "Serving" function ". That is to say, you can drag a panel to the page at will, but there is no fixed place for "Serving ", just like dragging and dropping a window on a Windows desktop-in fact, it is of little use and does not provide customization capabilities. However, it is very simple to use and supports saving the position of the panel in the profile.

The following is a sample code of dragoverlayextender. For the usage of dragoverlaybehavior, see the HTML code generated on the dragoverlayextender page:

 
<ASP: Login ID= "Floatlogin" Backcolor= "White"
 

 
Borderstyle= "Solid" Bordercolor= "Black" 
 

 
Runat= "Server">
 

 
</ASP: Login>
 

<ASP: dragoverlayextender ID= "Dragoverlayextender2" 
 

 
Enabled= "True" Targetcontrolid= "Floatlogin" 
 

 
Runat= "Server" />
 

The effect is as follows:

 

[2] using server-side dragpanel

Dragpanel is an extension control in ASP. NET Ajax Control Toolkit. Its functions are basically the same as dragoverlayextender and dragoverlaybehavior, and you can also save the location information of the Panel to the profile. The difference is that, in the drag implementation mode of dragoverlayextender and dragoverlaybehavior, you can move the cursor to any part of the entire panel to start dragging. While dragpanel is dragging, drag and Drop can be started only when you place the cursor in the specified draghandle (similar to the title bar of a Windows window.

The scalability and practicality of draghandle are also not flattering.

The following is an example code:

 
<ASP: Panel ID= "Floatpanel" Cssclass= "Floatpanel" Runat= "Server">
 

<ASP: Panel ID= "Floatpanelhandle" Cssclass= "Handle" Runat= "Server">
 

 
Drag a window
 

 
</ASP: Panel>
 

 
<Div Class= "Content">
 

 
In Windows, the drag of a window seems to be something we are used.
 

 
..................
 

 
..................
 

 
The window has the same behavior.
 

</Div>
 

 
</ASP: Panel>
 

 
<Ajaxtoolkit: dragpanelextender ID= "DPE" Targetcontrolid= "Floatpanel" 
 

 
Draghandleid= "Floatpanelhandle" Runat= "Server">
 

 
</Ajaxtoolkit: dragpanelextender>
 

The effect is as follows:

 

[3] using server-side reorderlist

The reorderlist control in ASP. NET Ajax Control Toolkit displays a list of entries automatically generated by data binding on the page. You can drag an item with the mouse to directly change the relative positional relationship between items in the list. During the drag process, the reorderlist control provides rich And customizable visual effects. After a user opens the mouse at a certain position, the reorderlist control will also automatically notify the data source control bound to it to update server data asynchronously or synchronously on the whole page.

Reorderlist controls are easy to use (server-side controls) with rich functions and good scalability. However, it is still not the most flexible. For example, if we want to drag and drop entries between multiple reorderlists, we cannot implement it-so we should not expect it to implement functions like webpart.

For details, see: using the reorderlist control in ASP. NET Ajax Control Toolkit to change the order of entries by dragging the mouse

The following is an example code:

 
<Ajaxtoolkit: reorderlist ID= "Musiclist" Cssclass= "Musiclist" 
 

 
Draghandlealignment= "Left" Postbackonreorder= "False" 
 

Performanceid= "Musicdatasource" Datakeyfield= "ID" 
 

 
Sortorderfield= "Order" Runat= "Server">
 

 
<Itemtemplate>
 

 
<Ajaxtoolkit: Rating ID= "Rating" Runat= "Server" 
 

 
Cssclass= "Rating" Starcssclass= "Ratingstar" 
 

Filledstarcssclass= "Filledratingstar" Emptystarcssclass= "Emptyratingstar" 
 

 
Currentrating= '<% # BIND ("rating") %>' Maxrating= "5" 
 

 
Readonly= "True">
 

 
</Ajaxtoolkit: Rating>
 

 
</Itemtemplate>
 

 
<Reordertemplate>
 

<Div Class= "Dragdue">
 

 
Drop here!
 

 
</Div>
 

 
</Reordertemplate>
 

 
<Draghandletemplate>
 

 
<ASP: Label ID= "Lbtitle" Cssclass= "Draghandle" 
 

Tooltip= "Drag me! " Runat= "Server" Text= '<% # BIND ("name") %>'>
 

 
</ASP: Label>
 

 
</Draghandletemplate>
 

 
</Ajaxtoolkit: reorderlist>
 

Cool results:

 

[4] Use updatepanel and the new version of webpart control in ASP. NET Ajax

ASP. although the webpart-related controls in net 2.0 are rich, easy to use, and powerful, we also need the drag-and-drop functions provided by them in the program, but they have two fatal defects:

1. The drag-and-drop function only supports ie browsers.
2. After you drag and drop to change the accessory location, the page will automatically send back to save the current settings.

The first problem can be solved through ASP. net Ajax in the new version of webpart control, the second problem can be done by adding updatepanel, originally in the CTP version of ASP. net Ajax, these functions have been fully implemented. Who knows that in the latest CTP ures CTP, it is not easy to use.

Since it is no longer available, it is unnecessary to analyze its advantages and disadvantages. But let's give a picture of the past glory (note, this is in Firefox !)......

 

[5] using the client dragdroplist

Dragdroplist is defined in ASP. NET Ajax ures CTP. It is very powerful and all implemented on the client, reducing the pressure on the server. Using dragdroplist to implement the similar effect of the webpart in the 4th solutions is completely correct, but the only pity is that its expansion function is not very good, although users can drag a panel from one area to another, the result of dragging is hard to persist ...... It is not so easy to use, and it is not flattering in terms of efficiency ...... In short, this is a very contradictory thing, some chicken ribs feel.

I used to use ASP. Net Atlas to implement the drag & drop effect (below ).ArticleThe dragdroplist sample program is provided in. Although it is based on ASP. NET Ajax of the CTP version, it can run on the latest version without any modification. If you are interested, you can search for related topics on the official forum.

 

[6] implement the idragsource and idroptarget interfaces on the client

With this solution, you can have a deep understanding of the drag and drop implementation in ASP. NET Ajax. The above dragdroplist implements the idragsource and idroptarget interfaces. The former is used to define projects that can be dragged, and the latter is used to define the areas that can be delivered. For more information, see my article "Using ASP. NET Atlas to implement drag-and-drop effects (I)". Although it has changed, I can still refer to it.

This implementation scheme should be said to be the most powerful, and will certainly be able to implement any function you want. However, in actual development, the difficulty is not small-or even quite complex. This article by Jeff prosise titled implementing drag-drop in ASP. net Ajax provides a very simple example program. If you are interested in learning, you may wish to take a look ......