当前位置： 文江博客话题详情

ASP 图像上的 JavaScript 平移

发布于 2024-09-28 17:37:49 字数 6199 浏览 1 评论 0原文

这里有一个小问题。我尝试实现一些 Javascript，它应该向 ASP 图像组件添加一些客户端功能。实际上这个图像组件是DevExpress组件之一，名为“AspxBinaryImage”。它只是对 ASP 图像进行了一些修改，添加了更多 CSS 和其他内容，但基础仍然只是 HTML 和许多行 JavaScript。

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

我发现了这个： 在 ASP.Net 中使用 Javascript 平移图像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>

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

希望您能提供帮助我就这样。

原文

got a little problem here. I tried to implement some Javascript, which should add some client side functionality to an ASP Image component. Actually this image component is one of the DevExpress component, called "AspxBinaryImage". It's just a little modified ASP Image, with some more CSS and stuff, but the base is still just HTML and many lines of JavaScript.

Okay now to my problem:
I tried to implement a panning on this image. If I leave out any type of ASP components and just name the site to an simple HTML page, there is no problem with the IE, but Mozilla doesn't work at all. If I try to use this JavaScript in an ASP Page context, nothing works at all.

I found this: Panning Image Using Javascript in ASP.Net Page Overflows Div and adapted many parts of it into my functions. I also tried the "customizing" in one of the responses, but it didn't work. Actually the JavaScript console of Firefox, as well as the FireBug console doesn't seem to find any mistakes, conflicts or problems in source.

Here is my complete Code of the ASP page which doesn't work in any browser:

<!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("moin, main");
                makeDraggable(document.getElementById("Mapimage"));
            }" />
        </dx:ASPxCallbackPanel>
    
    </form>
</body>
</html>

It seems the eventhandling (especially the values receiving from an action on an HTML element) seems to differ, depending on the browser...

Hope you can help me with that.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

╰◇生如夏花灿烂 2024-10-05 17:37:49

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

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

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

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

You don't really define what the problem is and its difficult to debug anything without being able to run the website.

However, it might be that function main() can't find the image control. ASP.NET automatically renames your ids to ensure that they are unique. So that MapImage element id will actually be Callback_Mapimage.

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

In Asp.net 4 you can set ClientIdMode="static" on the image to prevent this renaming.

回复 原文
鹤仙姿 2024-10-05 17:37:49

@geoff：好吧，在我的桌子上撞了一下头之后就修好了。解决方案的关键是重命名我不知道的ID以及div/DevExpress组件的正确对齐。我还必须处理不同的浏览器类型。

这是有效的 JavaScript 代码，在 Chrome、Opera、IE 和 Mozilla 中进行了测试：

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 的帮助！

@geoff: Okay fixed it after some headbanging on my table. The key to the solution was the renaming of the ID which I didn't know and the correct alignment of the divs/DevExpress components. I also had to deal with the different browser-types.

This is the working JavaScript code, tested in Chrome, Opera, IE and Mozilla:

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;
  }

}

And the use in HTML:

 <script type="text/javascript">

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

  </script>

Thanks geoff for your aid!

回复 原文
~没有更多了~

关于作者

伏妖词

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文