none
ModalPopupExtender内でDragPanelExtenderを使うとオブジェクトとマウスとの間に隙間ができる RRS feed

  • 質問

  •  

    お世話になります。

    下記問題が解決できず、困っています。

     

    [やりたい事]

    ポップアップウィンド内でのDragPanelExtender使用し、

    隙間なくドラッグさせたい

     

    [問題]

    ModalPopupExtender内でDragPanelExtenderを使うとオブジェクトとマウスとの間に隙間ができる

     

    [環境]

    AjaxControlToolkit(1.0.20229.0 on VS2005) を使用しています。

     

    [現象]

    1.ModalPopupExtenderでポップアップさせたいUpdatePanel_1上にDragPanelExtenderを配置。

    2.同じくUpdatePanel_1上にPanel_Aを配置し、DragPanelExtenderのTargetControlIDにする

    3.実行してPanel_Aをドラッグする

    4.マウスとかなり離れてPanel_Aがドラッグする

     

    以上、よろしくお願いします。

    2008年8月15日 13:05

回答

  • なめくじさん こんにちは。

     なめくじ さんからの引用

    画面の仕様で浮き上がって出てるUIでないとイケないそうです。

    できない場合は、仕様変更するしかないです・・・。

    なかなか大変そうな仕様ですね。ダイアログを表示するばと思うのですが、だめなのでしょうね。

     

    CSSでtopとleftを設定してもうまくいかないような気がするのですが。うまくいきましたか?

     

    いっそのこと自分でドラッグを実装するとかどうでしょうか?下記サンプルは元ネタのサイトをModalPopup用に少し変更を加えたものです。<%@ Page ..>の部分を変更すればほぼ動くともいますが。ほかにもいっぱいやることあるなら、仕様から見直す必要があるかもしれませんが。

     

    元ネタ- DragPanel doesn't follow mouse movements IE7

    http://forums.asp.net/p/1298474/2527309.aspx

     

    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>

     

     

    お役に立てればよいのですが。

    2008年8月18日 8:11

すべての返信

  • なめくじ さん こんにちは

     

    回答にはなりませんが、マウスとかなり離れてPanel_Aがドラッグするとありますが、ブラウザの左上隅からクリック位置の距離分はなれた位置にパネルが表示されていませんか?

     

    たぶん、ModalPopupExtenderで指定したPanelのスタイルが絶対位置指定で、その中で表示されるPanel_Aが絶対位置指定になっているのでうまく表示されないと思うのですが。

     

    UpdatePanelの内部にドラッグ可能なパネルを配置する理由は、ドラッグパネルの内容が変わるからですか?

    ドラッグするパネルの中身をUpdatePanelに設定することはできないでしょうか?その場合は離れた位置に表示されないようにできると思うのですが。

     

    #追記

    >[やりたい事]

    >ポップアップウィンド内でのDragPanelExtender使用し、

    >隙間なくドラッグさせたい

     

    ポップアップしたパネル内で特定のパネルをドラッグしたいのですね。

    ポップアップしたパネルをドラッグしたいのと勘違いしていました。投稿内容は無視して下さい。

    申し訳ないです。

     

    2008年8月15日 14:31
  • handcraftさん 返答ありがとうございます。

     

    >たぶん、ModalPopupExtenderで指定したPanelのスタイルが絶対位置指定で、

    >その中で表示されるPanel_Aが絶対位置指定になっているのでうまく表示されないと思うのですが。

    おっしゃる通り、左端にドラッグして持っていくとPanel_Aがほぼ中央にくるので、そうかと思います。

    CSSでtopとleftとマイナスの値に設定して移動をやってみます。

     

    >UpdatePanelの内部にドラッグ可能なパネルを配置する理由は、ドラッグパネルの内容が変わるからですか?

    その通りです。UpdatePanel上で検索して結果を表示させています。

     

    >ドラッグするパネルの中身をUpdatePanelに設定することはできないでしょうか?その場合は離れた位置に表示されないように

    >できると思うのですが。

    画面の仕様で浮き上がって出てるUIでないとイケないそうです。

    できない場合は、仕様変更するしかないです・・・。

     

    2008年8月18日 7:14
  • なめくじさん こんにちは。

     なめくじ さんからの引用

    画面の仕様で浮き上がって出てるUIでないとイケないそうです。

    できない場合は、仕様変更するしかないです・・・。

    なかなか大変そうな仕様ですね。ダイアログを表示するばと思うのですが、だめなのでしょうね。

     

    CSSでtopとleftを設定してもうまくいかないような気がするのですが。うまくいきましたか?

     

    いっそのこと自分でドラッグを実装するとかどうでしょうか?下記サンプルは元ネタのサイトをModalPopup用に少し変更を加えたものです。<%@ Page ..>の部分を変更すればほぼ動くともいますが。ほかにもいっぱいやることあるなら、仕様から見直す必要があるかもしれませんが。

     

    元ネタ- DragPanel doesn't follow mouse movements IE7

    http://forums.asp.net/p/1298474/2527309.aspx

     

    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>

     

     

    お役に立てればよいのですが。

    2008年8月18日 8:11
  • handcraftさん たびたび返答ありがとうございます。


    上記scriptにて一応実現できたのですが、後々の保守性(他者がjavascriptの知識が0だったりします)で

    結局、コントロールで実現できないのではダメという事となり、仕様が変わりました。


    他のサイトで似たような現象はおきているみたいなのですが、

    英語が理解できないのと時間がないので断念しました。

    ↓似たような現象と対策?

    http://forums.asp.net/p/1213885/2146704.aspx

    なぜか、dropdown.jpを修正しています。

    以上、ありがとうございました。

    2008年8月19日 4:09