- PR -

【Ajax tool kit】modal popup extenderをドラッグしても元の位置に戻ってしまう

参照元記事 | 同じ記事を参照しているスレッド一覧
1
投稿者投稿内容
キレネン
会議室デビュー日: 2008/08/04
投稿数: 9
投稿日時: 2008-09-22 23:15
いつもお世話になっております。

@ITの記事で、モーダルポップアップを表示することは出来ました。
(参照元記事URL)

やりたいことは、ポップアップをドラッグし、
ドロップした場合にその位置にポップアップを表示させることです。

しかし、モーダルポップアップのプロパティをあれこれいじり倒してみたのですが
ドロップするとどうしても最初の表示位置に戻ってしまいます。

いずれかのプロパティをいじることで可能なのでしょうか。
どなかたご存知の方がいらっしゃったらご教示下さい。
開発環境はVisualStudio2005です。

尚、ドラッグした場合に何かイベントが発生するならば
そのイベントハンドラの中で、各ポップアップならびに上に載っているボタンの
座標を常にそのドラッグ位置に更新させようかと思ったのですが
どうもドラッグイベント自体が無いようですね。
(@@)

以上、宜しくお願い致します。
arika1969
会議室デビュー日: 2008/09/23
投稿数: 5
投稿日時: 2008-09-23 23:32
ここなんか参考になるのではないでしょうか？

http://forums.microsoft.com/MSDN-JA/ShowPost.aspx?PostID=3751040&SiteID=7
キレネン
会議室デビュー日: 2008/08/04
投稿数: 9
投稿日時: 2008-09-24 23:54
arika1969様

情報をありがとうございます。
しかしこれだと、ポップアップの中でパネルをドラッグさせてるので、
今回の様にポップアップしたパネル自体をドラッグしたいのとは
ちょっと違うみたいです。

modal popup extender自体にdragプロパティが存在し、
それをtrueにすることでドラッグ処理自体は簡単に実現出来るのですが
ドラッグしてもドロップした途端に、最初の表示位置に戻ってしまう
のを簡単に無効に出来ないものかと思っていました。

asp.net自体1ヶ月程度で、javaScriptに関する知識は殆ど無いのですが、
それだけの事をするのもかなり大変そうだなという気がしてきました・・・
arika1969
会議室デビュー日: 2008/09/23
投稿数: 5
投稿日時: 2008-09-25 08:09
キレネン様

URLを参考にし、カスタマイズすればよいかと思ったのですが．．．

私が、キレネン様のスレでURLを参照し、テストしたPrgを参考になるか分かりませんが載せておきます。

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default1.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TEST Modal Dialog</title>
<script language="javascript" type="text/javascript">
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;
}
} // 入力値を基に、挨拶メッセージを生成
function onOk() {
$get("result").innerHTML = "こんにちは、" + $get("txtName").value + "さん！";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="manager" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnPopup" runat="server" Text="ポップアップ" /><br />
<%--結果表示用の領域をあらかじめ確保--%>
<div id="result"></div>
<br />
<asp:Panel ID="pnlDialog" runat="server">
<div id="tst" onmousedown="fDragging('pnl', event, false);">
<asp:Panel ID="pnl" runat="server" Wrap="false" style="position: absolute; left: 50px; top: 50px; background-color: #C0C0FF;">
<p>あなたの名前を入力してください。</p>
<p>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="btnOk" runat="server" Text="決定" />
<asp:Button ID="btnCancel" runat="server" Text="キャンセル" />
</p>
</asp:Panel>
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="modal" runat="server" BackgroundCssClass="madalBackground"
CancelControlID="btnCancel" Drag="True" DropShadow="True" OkControlID="btnOk"
OnOkScript="onOk()" PopupControlID="pnlDialog" PopupDragHandleControlID="pnl"
TargetControlID="btnPopup">
</ajaxToolkit:ModalPopupExtender>
</form>
</body>
</html>
なめくじ
会議室デビュー日: 2003/02/20
投稿数: 11
投稿日時: 2008-09-25 10:03
同じ問題持っていたなめくじです。(というか本人です)
VS2005のAjaxToolKitはバグが多く、そのまま使えるのは２〜３程度らしいです。

UpdatePanel等を多重するとどうもうまく動かなかったので、
見えないDIV(style="z-index:10; width:0px; height:0px; position:absolute; top:0px; left:0px;"とかやって)にUpdatePanelを乗せ、見えないButtonやModal、Modalの内容等のせて対処しました。
別コントロールのイベントからからmodal.showやupdatepanel.Updateを駆使しました^^;

VS2008からMSが正式にサポートしてくれるのでそちらが使える場合はそちらがオススメです。
キレネン
会議室デビュー日: 2008/08/04
投稿数: 9
投稿日時: 2008-10-06 22:37
arika1969様>
返答が遅くなり、大変申し訳ありませんでした。
試してみますので、また何かありましたら伺いたいと思います。
本当にありがとうございました。

なめくじ様>
情報ありがとうございました。
一つの事をやるにも色々苦労しますよね･･･。
1

スキルアップ／キャリアアップ（JOB@IT）