by WebSurfer
5. April 2014 15:47
Ajax Control Toolkit の ModalPopupExtender をドラッグできない（正確には、ドラッグはできるが元の位置に戻ってしまう）ケースがあります。その理由と対処法を書きます。
検証用に、上の画像のような Button コントロールを一つだけ配置したような aspx ページを作ったとします。
Button クリックで ModalPopup が現れ、デフォルトではウィンドウの中央に表示されるはずです。
これをマウスでクリックして任意の位置にドラッグすることができますが、離すと元の位置に戻ってしまいます。
その理由は、ModalPopup のドラッグが有効なのは body の中だけなので、ボタン一つだけというように body のサイズが極端に小さくなる場合、ドラッグしても元の位置に戻ってしまうということになります。
通常はボタン一つだけというようなページを作ることはないので、このような問題に遭遇することはないかもしれませんが、もし body のサイズが極端に小さくなる場合があれば、CSS で body のサイズを指定してやることで問題を回避できます。
上の画像のサンプルは、実際に動かして試すことができるよう 実験室 にアップしましたが、これは body に height: 300px; width: 600px; というスタイルを適用しています。
height: 300px; width: 600px; の範囲（赤い線で囲った部分）内だけでドラッグして移動できる（範囲外にドラッグした場合は元の位置に戻ってしまう）ことが分かりますので、興味のある方は試してみてください。
サンプルのコードは以下の通りです。
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>WebSurfer's Page - 実験室</title>
<style type="text/css">
.modalBackground {
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.modalPopup {
height: 150px;
width: 400px;
background-color: White;
}
.modalDraggableArea {
cursor: move;
background-color: #DDDDDD;
border: solid 1px Gray;
}
body {
height: 300px;
width: 600px;
border: 1px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="Manager1" runat="server">
</asp:ToolkitScriptManager>
<asp:ModalPopupExtender ID="ModalPopupExtender1"
runat="server"
TargetControlID="Button1"
PopupControlID="Panel1"
PopupDragHandleControlID="Panel2"
BackgroundCssClass="modalBackground"
OkControlID="Button2"
CancelControlID="Button3">
</asp:ModalPopupExtender>
<asp:Button ID="Button1"
runat="server" Text="ModalPopup 表示" />
<asp:Panel ID="Panel1"
runat="server"
CssClass="modalPopup">
<asp:Panel ID="Panel2"
runat="server"
CssClass="modalDraggableArea">
<p style="text-align: center;">
********* ここをつかんでドラッグ *********
</p>
</asp:Panel>
<p style="text-align: center;">ModalPopup</p>
<p style="text-align: center;">
<asp:Button ID="Button2" runat="server" Text="OK" />
<asp:Button ID="Button3" runat="server" Text="Cancel" />
</p>
</asp:Panel>
</form>
</body>
</html>