在ASP.Net页溢出股利摇摄时影像使用JavaScript [英] Panning Image Using Javascript in ASP.Net Page Overflows Div
问题描述
我有一个包含一个ASP.Net页＆LT; DIV＆GT; 与＆LT; IMG＆GT; 标签中。该图像是大所以＆LT; DIV＆GT; 设置大小为500x500像素，具有溢出设置为滚动
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.
下面是例子code，它说明了这个问题：
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>
另外请注意，此HTML的页面non-ASP.Net正常工作。
Also note that this HTML works fine in a non-ASP.Net page.
有什么东西在ASP.Net的Javascript是造成这个问题？有没有人有内平移一个JPEG建议在＆LT; DIV＆GT; 块，将在ASP.Net工作？我已经使用jQueryUI的库尝试，但结果是一样的。
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.
推荐答案
您格divInnerDiv必须作为风格
your div "divInnerDiv" must be styled as
positition: relative;
为了与IMG
position: absolute;
要从div的起源定位。否则，它是绝对定位在页面的起源。我想你也可以蒙混过关，如果你想手动放置它，而不是在文档流绝对定位你的div。
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.
你有与Firefox / Chrome的一些不同的问题，但现在是时候回家，这至少可以让你的形象从只要你触摸它弹出其容器。
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.
编辑：火狐/ Chrome的问题
edit: firefox/chrome issues
在功能的mouseMove你在哪里设置元素的位置，Firefox和Chrome需要与价值单位。它应该看起来像这样的东西：
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：如何解决心惊肉跳图片
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.
添加一个新的变量（上部）举行img元素的起始坐标
add a new variable (towards the top) to hold the starting coordinates of the img element
var imgStartLoc = null;
我们将在onmousedown事件函数设置这个（也许不是这样做最彻底的方法，但它的工作原理）
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);
与
ev = ev || window.event;
mouseOffset = mouseCoords(ev);
因为我们想知道在哪里鼠标在页面上，而不是在DIV。
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.
这篇关于在ASP.Net页溢出股利摇摄时影像使用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
