Ajax controltoolkit Learning Log-dragpanel (8)

The dragpanel control is used to drag a panel on a webpage and arrange its position from the new one.

Here is an example:

1) Create an ASP. NET Ajax-enabled web project named dragpanel1.

2) drag and drop three panels on the page and name them draghandlepanel, content, and dragpanel respectively. Draghandlepanel is used as the drag event processing, content as the storage content, and dragpanel as the entire target object of dragpanelextender. Code As follows:
1 < Div Style = "Height: 300px; width: 150px ;" >
2 < ASP: Panel ID = "Dragpanel" Runat = "Server" >
3 < ASP: Panel ID = "Draghandlepanel" Height = "20px" Width = "100%" Runat = "Server" >
4 < Div Class = "Dragme" > Drag me </ Div >
5 </ ASP: Panel >
6 < ASP: Panel ID = "Content" Height = "100px" Width = "100%" Runat = "Server" >
7 < Div > Fjeofjioefjojefiefef </ Div >
8 </ ASP: Panel >
9 </ ASP: Panel >
10
11 </ Div >

3) drag and drop a dragpanelextender on the page to set its attributes. The Code is as follows:
<C0: dragpanelextenderID= "Dragpanelextender1"Targetcontrolid= "Dragpanel"Draghandleid= "Draghandlepanel"Runat= "Server"> </C0: dragpanelextender>

The view is as follows:



4) press Ctrl + F5 to view the information in the browser. The effect is as follows: