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

发布于 2024-08-25 07:24:27 字数 3365 浏览 1 评论 0原文

我有一个 ASP.Net 页面，其中包含一个

，其中包含一个标记。图像很大，因此

设置为 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 中是否有某些内容导致了此问题？有人建议在 ASP.Net 中工作的

块内平移 JPEG 吗？我尝试过使用 jQueryUI 库，但结果是相同的。

原文

I have an ASP.Net page that contains a <div> with an <img> tag within. The image is large so the <div> is set with a size of 500x500 pixels with overflow set to scroll.

I'm attempting to add image panning using a click and drag on the image. However, every time I begin dragging the image escapes the boundary of the element and consumes the entire page.

Here is example code that illustrates the problem:

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

Also note that this HTML works fine in a non-ASP.Net page.

Is there something in the ASP.Net Javascript that is causing this issue? Does anyone have a suggestion for panning a JPEG within a <div> block that will work in ASP.Net? I have tried using the jQueryUI library but the result is the same.

分享到QQ

分享到微博

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

发布评论

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

檐上三寸雪 2024-09-01 07:24:27

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

全部应该在此之后。

your div "divInnerDiv" must be styled as

positition: relative;

in order for the img with

position: absolute;

to be positioned from the origin of the div. otherwise, it's absolutely positioned from the origin of the page. i think you can also get away with absolutely positioning your div if you want to place it manually rather than in the flow of the document.

you have some different issues with firefox/chrome, but it's time to go home and this will at least keep your image from popping out of its container as soon as you touch it.

edit: firefox/chrome issues

in the function mouseMove where you are setting the position of the element, firefox and chrome require units with the value. it should look like something this:

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

there's also a general issue with how the script determines where to move the element to but i'm not sure what it is right now.

edit2: how to fix the jumpy image

we're going to change the procedures a bit. rather than placing the image based on how far the mouse has moved from the last move event, we're going to see where the mouse is compared to where it was when mousedown fired and move the image that far from where it started.

add a new variable (towards the top) to hold the starting coordinates of the img element

var imgStartLoc = null;

we'll set this in the onmousedown function (maybe not the cleanest way to do this but it works)

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

also in the mousedown function replace

mouseOffset = getMouseOffset(this, ev);

with

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

since we want to know where the mouse is on the page rather than in the div.

in the mouseMove function change the top/left assignment lines to

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

all should be well after this.

回复收藏 0 原文

~没有更多了~