0

我有一个 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>可以在 ASP.Net 中工作的块内平移 JPEG？我曾尝试使用 jQueryUI 库，但结果是一样的。

4

1 回答 1

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

在此之后一切都应该很好。

于 2010-03-17T22:08:54.267 回答