Question

这里有点问题。我试图实现一些javascript，它应该为ASP Image组件添加一些客户端功能。实际上，这个图像组件是DevExpress组件之一，称为“AspxBinaryImage”。它只是一个稍微修改过的ASP Image，还有一些CSS和东西，但基础仍然只是HTML和许多JavaScript行。

现在好了我的问题：我试图在这张图片上实现平移。如果我省略任何类型的ASP组件，只是将网站命名为一个简单的HTML页面，IE就没有问题，但Mozilla根本不工作。如果我尝试在ASP页面上下文中使用这个JavaScript，那么根本没有任何作用。

我发现了这个：Panning Image Using Javascript in ASP.Net Page Overflows Div并将其中的许多部分改编成我的函数。我也尝试过其中一个回复中的“自定义”，但它没有用。实际上，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>

Imo，事件处理（特别是从HTML元素上的动作接收的值）似乎有所不同，具体取决于浏览器......

希望你们能帮助我。

映入眼帘，

Alex

Answer 1

您没有真正定义问题所在，并且无法在不运行网站的情况下调试任何内容。

但是，function main()可能无法找到图像控件。 ASP.NET会自动重命名您的ID以确保它们是唯一的。这样MapImage元素id实际上就是Callback_Mapimage。

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

在Asp.net 4中，您可以在图像上设置ClientIdMode="static"以防止重命名。

Answer 2

@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>

感谢Geoff的帮助！

在ASP镜像上进行JavaScript平移

2 个答案: