Code Snippet
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<%@ 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 id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
//<![CDATA[
function fDragging(obj, e, limit){
if(!e) e=window.event;
obj=document.getElementById(obj);
var x=parseInt(obj.style.left);
var y=parseInt(obj.style.top);
var x_=e.clientX-x;
var y_=e.clientY-y;
if(document.addEventListener){
document.addEventListener("mousemove", inFmove, true);
document.addEventListener("mouseup", inFup, true);
} else if(document.attachEvent){
document.attachEvent("onmousemove", inFmove);
document.attachEvent("onmouseup", inFup);
}
inFstop(e);
inFabort(e);
obj.setCapture();
function inFmove(e){
var evt;
if(!e)e=window.event;
if(limit){
var op=obj.parentNode;
//debugger;
var opX=parseInt(op.style.left);
var opY=parseInt(op.style.top);
if((e.clientX-x_)<0) return false;
//else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false;
if(e.clientX - x_ + obj.offsetWidth > op.offsetWidth) return false;
if(e.clientY-y_<0) return false;
//else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight)) return false;
if(e.clientY - y_ + obj.offsetHeight > op.offsetHeight) return false;
}
obj.style.left=e.clientX-x_+"px";
obj.style.top=e.clientY-y_+"px";
inFstop(e);
}
function inFup(e){
var evt;
if(!e)e=window.event;
if(document.removeEventListener){
document.removeEventListener("mousemove", inFmove, true);
document.removeEventListener("mouseup", inFup, true);
} else if(document.detachEvent){
document.detachEvent("onmousemove", inFmove);
document.detachEvent("onmouseup", inFup);
}
obj.releaseCapture();
inFstop(e);
}
function inFstop(e){
if(e.stopPropagation) return e.stopPropagation();
else return e.cancelBubble=true;
}
function inFabort(e){
if(e.preventDefault) return e.preventDefault();
else return e.returnValue=false;
}
}
//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="Button2"
TargetControlID="Button1" PopupControlID="Panel5">
</ajaxToolkit:ModalPopupExtender>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Panel runat="server" ID="Panel5" BackColor="Purple"
Style="overflow: hidden;display:none;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="Panel2" Width="300px" Height="230px" BackColor="Green">
<div id="DragPanel" style="border: 1px solid blue; width: 180px; text-align: center;
position: absolute; left: 50px; top: 50px;">
<div id="title" onmousedown="fDragging('DragPanel', event, true);" style="height: 20px;
width: 180px; background-color: Gray;">
Drag Me</div>
<div style="background-color: #FFFFFF;">
element
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
dragging compatibility for IE, Opera, Firefox.
</div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" Text="Button" />
</asp:Panel>
</form>
</body>
</html>
