AJAX Drag Panel Extender Control in ASP.net
In this article I'm trying to explain how to work with drag and drop functionality using AJAX. Here we learn how to work with drag functionality using AJAX. There is a control called DragPanelExtender using that we can easily move panel from one place to another.
AJAX Drag Panel Extender Control in ASP.net:
In this article I'm trying to explain how to work with AJAX Drag Panel Extender Control in ASP.net. Here we learn how to work with drag functionality using AJAX. There is a control called DragPanelExtender using that we can easily move panel from one place to another.Description:
The Drag Panel Extender allows user to easily add dragability to the controls ( panel ). It targets the asp.net Panel controls. Once it's initiated the user can easily use drag functionality to the control.AJAX:
For this we must download AJAX control Toolkit dll and add reference to the project, by right clicking the project and choose assembly reference to add that.
After added the dll add below lines of code in source code.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
Now, you are able to call the Balloon Control in your source.
<ajaxToolkit:DragPanelExtender ID="drge" runat="server" TargetControlID="pnl1" DragHandleID="pnl1"></ajaxToolkit:DragPanelExtender>Properties:
There are 2 properties need to set for this functionality, one is TargetControlID and another one is DragHandleID.
TargetControlID: its targets the control to perform action.
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.Source Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragPanel.aspx.cs" Inherits="DragPanel" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 300px; width: 250px; float: left; padding: 5px;">
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<asp:Panel ID="pnl1" runat="server" Width="200px" Height="200px"
BorderStyle="Solid" BorderWidth="2px" BorderColor="black" Style="Overflow: scroll;">
<div>
The Drag Panel extender allows users to easily add "drag ability" to their controls. The
Drag Panel targets any ASP.NET Panel and takes an additional parameter that signifies the
Control to use as the "drag handle". Once initialized, the user can freely drag the panel
Around the web page using the drag handle.
</div>
</asp:Panel>
<ajaxToolkit:DragPanelExtender ID="drge" runat="server" TargetControlID="pnl1" DragHandleID="pnl1"></ajaxToolkit:DragPanelExtender>
</div>
<div style="clear: both;"></div>
</form>
</body>
</html>Output:
<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />
Without wrote this line in source code it's throws the server error to overcome this issue we just add above lines of code in source.
Conclusion:
Using this we can easily perform the dragability action to the controls. Hope this will help you someone those who are looking for the same.
Follow