0

ここで少し問題が発生しました。ASP Image コンポーネントにクライアント側の機能を追加する Javascript を実装しようとしました。実はこの画像コンポーネントは「AspxBinaryImage」と呼ばれる DevExpress コンポーネントの 1 つです。これは、ASP イメージを少し変更しただけで、CSS などを追加したものですが、基本は HTML と多数の JavaScript 行だけです。

さて、私の問題です。この画像にパンを実装しようとしました。どんな種類の ASP コンポーネントも省略して、単純な HTML ページにサイトの名前を付けるだけであれば、IE には問題はありませんが、Mozilla はまったく機能しません。この JavaScript を ASP ページ コンテキストで使用しようとすると、何も機能しません。

私はこれを見つけました：ASP.Net Page Overflows DivでJavascriptを使用して画像をパンし、その多くの部分を私の関数に適合させました。回答の1つで「カスタマイズ」も試しましたが、うまくいきませんでした。実際、Firefox の JavaScript コンソールと FireBug コンソールは、ソースに誤り、競合、または問題を検出していないようです。

これは、どのブラウザでも機能しない ASP ページの完全なコードです。

<!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>
    <script language="JavaScript" type="text/javascript" src="/JavaScript/MouseWheelZooming.js">
    </script>
  
    <script type="text/javascript">

        document.onmousemove = mouseMove;
        document.onmouseup = mouseUp;

        var dragObject = null;
        var mouseOffset = null;

        function mouseCoords(ev) {
            if (ev.pageX || ev.pageY) {
                return { x: ev.pageX, y: ev.pageY };
            }
            return {
                x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y: ev.clientY + document.body.scrollTop - document.body.clientTop
            };
        }

        function getMouseOffset(target, ev) {
            ev = ev || window.event;

            var docPos = getPosition(target);
            var mousePos = mouseCoords(ev);
            return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y };
        }

        function getPosition(e) {
            var left = 0;
            var top = 0;

            while (e.offsetParent) {
                left += e.offsetLeft;
                top += e.offsetTop;
                e = e.offsetParent;
            }

            left += e.offsetLeft;
            top += e.offsetTop;

            return { x: left, y: top };
        }

        function mouseMove(ev) {
            ev = ev || window.event;
            var mousePos = mouseCoords(ev);

            if (dragObject) {
                dragObject.style.position = 'absolute';
                dragObject.style.top = mousePos.y - mouseOffset.y;
                dragObject.style.left = mousePos.x - mouseOffset.x;

                return false;
            }
        }
        function mouseUp() {
            dragObject = null;
        }

        function makeDraggable(item) {
            if (!item) return;
            item.onmousedown = function(ev) {
                dragObject = this;
                mouseOffset = getMouseOffset(this, ev);
                return false;
            }
        }

        function main() {
            alert("foo");
            initWheelZoomEventhandler();
            makeDraggable(document.getElementById("Mapimage"));
        }
        
     
    </script> 
    
</head>
<body onload="javascript:main();">
    <form id="form1" runat="server">
    <div id="Container">
        <table border="0">
            <tr>
                <td>
                    <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Refresh">
                        <ClientSideEvents Click="function (r,s){Callback.PerformCallback();}" />
                    </dx:ASPxButton>
                </td>
                <td>
                    <dx:ASPxButton ID="ASPxButton2" runat="server" AutoPostBack="False" Text="Pan">
                        <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" />
                    </dx:ASPxButton>
                </td>
                <td>
                    <dx:ASPxButton ID="ASPxButton3" runat="server" AutoPostBack="False" Text="Zoom In">
                        <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" />
                    </dx:ASPxButton>
                </td>
                <td>
                    <dx:ASPxButton ID="ASPxButton4" runat="server" AutoPostBack="False" Text="Zoom Out"
                        HorizontalAlign="Center">
                        <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" />
                    </dx:ASPxButton>
                </td>
                <td>
                    <dx:ASPxButton ID="ASPxButton5" runat="server" AutoPostBack="False" Text="Zoom Rec"
                        HorizontalAlign="Center">
                        <ClientSideEvents Click="function (r, s){Callback.PerformCallback();}" />
                    </dx:ASPxButton>
                </td>
            </tr>
        </table>
    </div>
    
    
        <dx:ASPxCallbackPanel ID="Callback" runat="server" ClientInstanceName="Callback"
            OnCallback="Callback_Callback" HideContentOnCallback="False" ShowLoadingPanel="False"
            style="overflow:scroll; width: 300px; height: 400px; cursor: move; position: relative;">
            <PanelCollection>
                <dx:PanelContent runat="server">
                    <%--<div id="divInnerDiv" >--%>
                        <dx:ASPxBinaryImage ID="Mapimage" runat="server" ClientInstanceName="Mapimage">
                        </dx:ASPxBinaryImage> <%--style="position : absolute;" --%>
                    <%--</div>--%>
                </dx:PanelContent>
            </PanelCollection>
            <ClientSideEvents EndCallback="function(s, e) {
             alert(&quot;moin, main&quot;);
                makeDraggable(document.getElementById(&quot;Mapimage&quot;));
            }" />
        </dx:ASPxCallbackPanel>
    
    </form>
</body>
</html>

イベントハンドリング (特に HTML 要素のアクションから受け取る値) は、ブラウザーによって異なるようです...

あなたがそれで私を助けてくれることを願っています.

4

2 に答える 2

1

問題が何であるかを実際に定義していないため、Web サイトを実行できずに何かをデバッグすることは困難です。

ただし、function main()イメージ コントロールが見つからない可能性があります。ASP.NET は、一意になるように ID の名前を自動的に変更します。そのため、MapImage 要素の ID は実際にはCallback_Mapimage.

function main() {
        alert("foo");
        initWheelZoomEventhandler();
        makeDraggable(document.getElementById("Callback_Mapimage"));
    }

Asp.net 4ClientIdMode="static"では、この名前の変更を防ぐためにイメージを設定できます。

于 2010-10-25T07:30:15.687 に答える
0

@geoff: テーブルでヘッドバンギングをした後、問題を修正しました。解決の鍵は、私が知らなかった ID の名前変更と、div/DevExpress コンポーネントの正しい配置でした。また、さまざまな種類のブラウザーに対処する必要がありました。

これは、Chrome、Opera、IE、および Mozilla でテストされた動作中の JavaScript コードです。

document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

var dragObject = null;
var mouseOffset = null;
var imgStartLoc = null;


function mouseCoords(ev)
{
  if (ev.pageX || ev.pageY)
  {
    return { x: ev.pageX, y: ev.pageY };
  }
  return {
    x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y: ev.clientY + document.body.scrollTop - document.body.clientTop
  };
}

function getMouseOffset(target, ev)
{
  ev = ev || window.event;

  var docPos = getPosition(target);
  var mousePos = mouseCoords(ev);

  return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y };
}

function getPosition(e)
{
  var left = 0;
  var top = 0;

  while (e.offsetParent)
  {
    left += e.offsetLeft;
    top += e.offsetTop;
    e = e.offsetParent;
  }

  left += e.offsetLeft;
  top += e.offsetTop;

  return { x: left, y: top };
}

function mouseMove(ev)
{
  ev = ev || window.event;
  var mousePos = mouseCoords(ev);


  if (dragObject)
  {
    dragObject.style.position = 'absolute';
    var mouseDelta = { x: mousePos.x - mouseOffset.x, y: mousePos.y - mouseOffset.y }
    dragObject.style.top = (imgStartLoc.y + mouseDelta.y).toString() + 'px';
    dragObject.style.left = (imgStartLoc.x + mouseDelta.x).toString() + 'px';

    return false;
  }
}

function mouseUp()
{
  dragObject = null;

}

function makeDraggable(item)
{
  if (!item)
  {
    return;
  }

  item.onmousedown = function(ev)
  {
    dragObject = this;
    ev = ev || window.event;
    mouseOffset = mouseCoords(ev);

    imgStartLoc = {
      x: isNaN(parseInt(dragObject.style.left)) ? 0 : parseInt(dragObject.style.left),
      y: isNaN(parseInt(dragObject.style.top)) ? 0 : parseInt(dragObject.style.top)
    };

    return false;
  }

}

そしてHTMLでの使用：

 <script type="text/javascript">

        // initialize the eventlisteners for user-interaction
        function init()
        {
          makeDraggable(document.getElementById("Callback_Mapimage"));
        }

  </script>

助けてくれてありがとうジェフ！

于 2010-10-25T14:27:54.223 に答える