JavaScript Panning on ASP Image
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 brows开发者_JS百科er:
<!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.
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.
@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!
加载中,请稍侯......
精彩评论