在 ASP.Net 页面溢出 Div 中使用 Javascript 平移图像答案

【问题标题】：Panning Image Using Javascript in ASP.Net Page Overflows Div在 ASP.Net 页面溢出 Div 中使用 Javascript 平移图像
【发布时间】：2011-01-28 15:44:37
【问题描述】：

我有一个 ASP.Net 页面，其中包含一个 <div> 和一个 <img> 标记。图片很大，所以<div> 的大小设置为 500x500 像素，溢出设置为滚动。

我正在尝试通过单击并拖动图像来添加图像平移。但是，每次我开始拖动时，图像都会脱离元素的边界并占用整个页面。

下面是说明问题的示例代码：

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="divInnerDiv" style="overflow:scroll; width:500px; height:500px; cursor:move;">
            <img id="imgTheImage" src="Page0001.jpg" border="0" />
        </div>

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

            makeDraggable(document.getElementById("imgTheImage"));
        </script>

    </div>
    </form>
</body>
</html>

另请注意，此 HTML 在非 ASP.Net 页面中可以正常工作。

ASP.Net Javascript 中是否存在导致此问题的内容？有没有人建议在<div> 块内平移 JPEG，这将在 ASP.Net 中工作？我尝试过使用 jQueryUI 库，但结果是一样的。

【问题讨论】：

.net 无关紧要，因为这都是客户端行为。我会再次查看可拖动的 jQuery.UI——特别是包含选项：docs.jquery.com/UI/Draggable#option-containment
@DA - 如果 .Net 方面无关紧要，那么为什么这在直接的 HTML 页面中有效，但在 ASPX 页面中无效？我使用 jQueryUI 创建了一个示例页面，使用包含选项，该选项在 IE8 中有效，但在 IE7 中查看时存在类似的溢出问题。我在 jQuery UI 板上发布了几条消息，添加了一个错误报告...没有响应，没有修复。
我不知道。如果我不得不猜测：.net 正在您的页面中注入脚本或标记或 css，这会干扰您编写的内容。将您的非 .net 页面的呈现页面与您的 .net 页面进行比较。

标签： asp.net javascript image panning

【解决方案1】：

您的 div "divInnerDiv" 的样式必须为

positition: relative;

为了img

position: absolute;

从 div 的原点定位。否则，它绝对定位于页面的原点。如果你想手动放置而不是在文档流中放置，我认为你也可以完全定位你的 div。

您在使用 firefox/chrome 时遇到了一些不同的问题，但该回家了，这至少可以防止您的图像在您触摸它时立即从容器中弹出。

编辑：firefox/chrome 问题

在设置元素位置的函数 mouseMove 中，firefox 和 chrome 需要具有值的单位。它应该看起来像这样：

dragObject.style.top = (mousePos.y - mouseOffset.y).toString() + 'px';
dragObject.style.left = (mousePos.x - mouseOffset.x).toString() + 'px';

还有一个关于脚本如何确定将元素移动到何处的一般问题，但我不确定它现在是什么。

edit2：如何修复跳动的图像

我们将稍微改变一下程序。我们不是根据鼠标距离上一次移动事件的移动距离来放置图像，而是将鼠标与触发 mousedown 时的位置进行比较，然后将图像移动到远离它开始的位置。

添加一个新变量（朝向顶部）来保存 img 元素的起始坐标

var imgStartLoc = null;

我们将在 onmousedown 函数中设置它（可能不是最干净的方法，但它有效）

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

也在mousedown函数中替换

mouseOffset = getMouseOffset(this, ev);

与

ev = ev || window.event;
mouseOffset = mouseCoords(ev);

因为我们想知道鼠标在页面上而不是在 div 中的位置。

在 mouseMove 函数中将顶部/左侧赋值行更改为

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

之后一切都会好起来的。

【讨论】：

太棒了！我仍然在为 CSS 定位而苦苦挣扎。这是使用我在 Internet 上找到的一些 javascript 而没有真正审查它的完美示例。如果您有机会对 Firefox/Chrome 问题发表评论，我会很乐意将此标记为已接受的答案。谢谢。