1.初始效果
2.改变位置后
- TargetControlID - The ID of a Panel to make draggable.（本例为：PanelContainer）
- DragHandleID - The ID of a control that will serve as the "drag handle" for the panel. When the user clicks and drags this control, the panel will move.（本例为：PanelHeader，当单击“Header”，按住可拖动）
示例代码：
1 <asp:ScriptManager ID="ScriptManager1" runat="server" />
2 <div>
3 <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="PanelContainer" DragHandleID="PanelHeader">
4 </ajaxToolkit:DragPanelExtender>
5 <asp:Panel ID="PanelContainer" runat="server" CssClass="dragContainer" >
6 <asp:Panel ID="PanelHeader" runat="server" CssClass="dragHeader">
7 <br />Header</asp:Panel>
8 <asp:Panel ID="PanelBody" runat="server" CssClass="dragBody">
9 <br />
10 One<br /><br />
11 Two<br /><br />
12 Three<br /><br />
13 Four
14 </asp:Panel>
15 </asp:Panel>
16 </div>
17
18 <script type="text/javascript">
19 function setBodyHeightToContentHeight() {
20 document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";
21 }
22 setBodyHeightToContentHeight();
23 window.attachEvent('onresize', setBodyHeightToContentHeight);
24 </script>
CSS
1 .dragContainer{
2 background-color: #FFC0FF;
3 height: 282px;
4 width: 357px;
5 border-bottom-color: black;
6 }
7
8 .dragHeader{
9 background-color: #8080FF;
10 height: 48px;
11 width: 358px;
12 }
13
14 .dragBody{
15 background-color: #FFC0FF;
16 height: 213px;
17 width: 357px;
18
19 }
20
21 .collapsePanel {
22 width: 640px;
23 height:0px;
24 background-color:white;
25 overflow:hidden;
26 }
27
28 .collapsePanelHeader{
29 width:640px;
30 height:20px;
31 color: Yellow;
32 background-color: Black;
33 font-weight:bold;
34 float:left;
35 padding:5px;
36 cursor: pointer;
37 vertical-align: middle;
38 }
39
40 .accordionHeader
41 {
42 border: 1px solid #2F4F4F;
43 color: white;
44 background-color: #2E4d7B;
45 font-family: Arial, Sans-Serif;
46 font-size: 12px;
47 font-weight: bold;
48 padding: 5px;
49 margin-top: 5px;
50 cursor: pointer;
51 }
52
53 .accordionContent
54 {
55 background-color: #D3DEEF;
56 border: 1px dashed #2F4F4F;
57 border-top: none;
58 padding: 5px;
59 padding-top: 10px;
60 }
61
62 .accordionLink
63 {
64 background-color: #D3DEEF;
65 color: white:
66 }
67
68 .watermark {
69 background: #FFAAFF;
70 }
71
72 .popupControl {
73 background-color:#AAD4FF;
74 position:absolute;
75 visibility:hidden;
76 border-style:solid;
77 border-color: Black;
78 border-width: 2px;
79 }
80
81 .modalBackground {
82 background-color:Gray;
83 filter:alpha(opacity=70);
84 opacity:0.7;
85 }
86
87 .modalPopup {
88 background-color:#ffffdd;
89 border-width:3px;
90 border-style:solid;
91 border-color:Gray;
92 padding:3px;
93 width:250px;
94 }
95
96 .sampleStyleA {
97 background-color:#FFF;
98 }
99
100 .sampleStyleB {
101 background-color:#FFF;
102 font-family:monospace;
103 font-size:10pt;
104 font-weight:bold;
105 }
106
107 .sampleStyleC {
108 background-color:#ddffdd;
109 font-family:sans-serif;
110 font-size:10pt;
111 font-style:italic;
112 }
113
114 .sampleStyleD {
115 background-color:Blue;
116 color:White;
117 font-family:Arial;
118 font-size:10pt;
119 }