Introduction
AJAX (Asynchronous
JavaScript and XML) is a new web development technique used for interactive
websites. With AJAX help, we can develop web applications and retrieve small amounts of
data from a web server. AJAX consists of a different type of technology.
- JavaScript
- XML
- Asynchronous Call to the server
DragPanelExtenderControl
The DragPanelExtender makes it
extremely simple to add a 'drag' to your controls. The DragPanelExtender targets
any ASP.NET Panel and allows additional parameters that signifies the control to
use as the "Drag Handle". With the help of this control we can move our panel
from one place to another on the client side. The user can freely drag the Panel
around the web page using the drag handle.
DragPanelExtender Control Properties
- TargetControlID
- BehaviorID
- DragHandleID
- Enabled
Step 1 : Open Visual Studio 2010.
- Go to File->New->WebSite
- Select ASP.NET Empty WebSite
Step 2 : Go to Solution Explorer and
right-click.
- Select Add->New Item
- Select WebForm
- Default.aspx page open
Step 3 : Go to Default.aspx page and
click on the [Design] option and drag control from Toolbox.
- Drag Panel control, Label, Button,
HiddenField
Step 4 : Go to Default.aspx
page[Source]option and drag panel. Inside the Panel control add another Panel
Control "Panel2".
Code :
<asp:Panel
ID="Panel1" runat="server"
Width="250px">
<asp:Panel
ID="Panel2"
runat="server"
Width="125%"
Height="115%"
BorderWidth="3px"
BorderStyle="Ridge"
BorderColor="#0066FF"
BackColor="#66FFCC">
PLEASE DRAG THIS CONTROL
</asp:Panel>
</asp:Panel>
Step 5 : Go to
Default.aspx page[Design] option drag DragPanelExtender control from
AjaxControlToolkit.
Step 6 : Now click on the
DragPanelExtender Control properties and define TargetControlID. BehaviorID.
Code :
<asp:DragPanelExtender
ID="Panel1_DragPanelExtender"
BehaviorID="DragP1"
runat="server"
DragHandleID="Panel1"
Enabled="True"
TargetControlID="Panel1">
</asp:DragPanelExtender>
Step 7 : Now add a script to maintain the position of the Panel after postback. We will be
adding a HiddenField which will store the position of the dragged panel. The
value has been initially set to "1".
Code :
<asp:HiddenField
ID="HiddenField1"
runat="server"
Value="1"
/>
Create JavaScript
<script
type="text/javascript"
language="javascript">
function pageLoad() {
$find('DragP1').add_move(savePanelPosition);
var elem = $get("<%=HiddenField1.ClientID%>");
if (elem.value !=
"0") {
var temp =
new Array();
temp = elem.value.split(';');
$find('<%=Panel1_DragPanelExtender.BehaviorID%>').set_location(new
Sys.UI.Point(parseInt(temp[0]), parseInt(temp[1])));
}
}
function savePanelPosition() {
var elem = $find('DragP1').get_element();
var loc = $common.getLocation(elem);
var elem1 = $get("<%=HiddenField1.ClientID%>");
elem1.value = loc.x + ';' +
loc.y;
}
</script>
Step 8 : Drag
and drop a ScriptManager control to the form. Also add a <div> tag to the page
with the following properties.
<form
id="form1" runat="server"
style="background-color:
#808080">
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<div>
<div
style="height:
100px; width:
350px; padding:
8px; background-color:
#E0B49E;">
Step 9 :
Go to the Default.aspx page option and write a
code.
Code :
<form
id="form1"
runat="server"
style="background-color:
#808080">
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<div>
<div
style="height:
100px; width:
350px; padding:
8px; background-color:
#E0B49E;">
<asp:Panel
ID="Panel1"
runat="server"
Width="250px">
<asp:Panel
ID="Panel2"
runat="server"
Width="125%"
Height="115%"
BorderWidth="3px"
BorderStyle="Ridge"
BorderColor="#0066FF"
BackColor="#66FFCC">
PLEASE DRAG THIS CONTROL
</asp:Panel>
</asp:Panel>
</div>
</div>
<asp:DragPanelExtender
ID="Panel1_DragPanelExtender"
BehaviorID="DragP1"
runat="server"
DragHandleID="Panel1"
Enabled="True"
TargetControlID="Panel1"
</asp:DragPanelExtender>
<script
type="text/javascript"
language="javascript">
function pageLoad() {
$find('DragP1').add_move(savePanelPosition);
var elem = $get("<%=HiddenField1.ClientID%>");
if (elem.value !=
"0") {
var temp =
new Array();
temp = elem.value.split(';');
$find('<%=Panel1_DragPanelExtender.BehaviorID%>').set_location(new
Sys.UI.Point(parseInt(temp[0]), parseInt(temp[1])));
}
}
function savePanelPosition() {
var elem = $find('DragP1').get_element();
var loc = $common.getLocation(elem);
var elem1 = $get("<%=HiddenField1.ClientID%>");
elem1.value = loc.x + ';' +
loc.y;
}
</script>
<asp:HiddenField
ID="HiddenField1"
runat="server"
Value="1"
/>
</form>
</body>
Step 10 :
Now run the application by Pressing F5.
Step 11 :
Now you can drag this control and change
the position in the panel.
When you will try to drop
this control outside the panel it will return back to the panel.
Reource :
Join the conversation! Your thoughts help the community grow.