javascript - ASP 图像上的 JavaScript 平移

Question

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

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

我发现了这个：在 ASP.Net Page Overflows Div 中使用 Javascript 平移图像并将其中的许多部分改编到我的函数中。我还尝试了其中一个回复中的“自定义”，但没有奏效。实际上，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 元素上的操作接收的值）似乎有所不同，具体取决于浏览器......

希望你能帮助我。

score 1 · Accepted Answer

您并没有真正定义问题是什么，并且在无法运行网站的情况下很难调试任何东西。

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

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

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

score 0 · Accepted Answer

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

感谢杰夫的帮助！

javascript - ASP 图像上的 JavaScript 平移

2 回答 2

Related

Reference