onMouseUp doesn't work on image drag/drop of more than a few pixels

D

David Wake

I am a complete Javscript newbie trying to produce a user interface
similar to Google Maps -- the user should be able to click anywhere on
the map and drag it in any direction.

The Javascript works OK when the map is only dragged a few pixels. If
the map is dragged any significant distance, however, the cursor
changes to a document-like icon (in Firefox 1.5) or a circle with a
line through it (in IE 5) and no onMouseUp event is fired on releasing
the mouse.

Here is my webpage. I have put in an alert on onMouseUp so that you
can see when the event occurs.

You can also see the site at

http://da-nu.com/javascript/scroll_test_interactive.html

Many thanks for any suggestions.

David


<html>
<head>
<script type="text/javascript">
var myImg = null;
var refMouseX = 0;
var refMouseY = 0;
var refImageX = 0;
var refImageY = 0;
var mouseDown = false;

function parsePositionInPixels(inputWithAppendedPx) {
var inputAsString = 'a'.replace(/a/, inputWithAppendedPx);
var numAsString = inputAsString.replace(/px/,"");
var num = eval(numAsString);
return num;
}

function debug(name) {
msg = "Event = " + name +
"\nrefMouseX = " + refMouseX +
"\nrefMouseY = " + refMouseY;

if (myImg.style != null && myImg.style.left != null) {
msg += "\nImage X Offset = " + myImg.style.left +
"\nImage Y Offset = " + myImg.style.top;
}
alert(msg);
}

function setLeft(left) {
var newLeft = left + "px";
myImg.style.left = newLeft;
// debug("setLeft");
}

function setTop(top) {
myImg.style.top = top + "px";
// debug("setTop");
}

function myOnMouseDown(e) {
if(!e) var e=window.event;
e.cancelBubble = true;
refMouseX = parsePositionInPixels(e.clientX);
refMouseY = parsePositionInPixels(e.clientY);
refImageX = parsePositionInPixels(myImg.style.left);
refImageY = parsePositionInPixels(myImg.style.top);
mouseDown = true;
// debug("onMouseDown");
}

function myOnMouseUp(){
mouseDown = false;
debug("onMouseUp");
}

function myOnMouseMove(event) {
if (mouseDown) {
// debug("onMouseMove");
setLeft(refImageX + (parsePositionInPixels(event.clientX) - refMouseX));
setTop (refImageY + (parsePositionInPixels(event.clientY) - refMouseY));
}
}

function myOnLoad() {
myImg = document.images['myImage'];
if(myImg.captureEvents)myImg.captureEvents(Event.MOUSEDOWN);
if(document.captureEvents)document.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
</script>
</head>

<body onMouseUp="myOnMouseUp(event)">
<div style="width:1000px;height:500px;overflow:hidden;position:relative">
<img name="myImage"
src="usa_map.gif"
style="width:4200px;height:3105px;left:-1350px;top:-1300px;position:absolute;"
onLoad="myOnLoad()"
onMouseDown="myOnMouseDown(event)"
onMouseMove="myOnMouseMove(event)"
onError="error()">
</div>
</body>
</html>
 
S

Stephen Chalmers

David said:
I am a complete Javscript newbie trying to produce a user interface
similar to Google Maps -- the user should be able to click anywhere on
the map and drag it in any direction.

The Javascript works OK when the map is only dragged a few pixels. If
the map is dragged any significant distance, however, the cursor
changes to a document-like icon (in Firefox 1.5) or a circle with a
line through it (in IE 5) and no onMouseUp event is fired on releasing
the mouse.

I believe this thread discusses your problem:

http://www.thescripts.com/forum/thread157659.html
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top