I found a simple example of a soccer ball that moves when you mouse drag it. (See code below). However, I'm attempting to turn off the horizontal movement and then catch the mouseup event, even if it's not over the ball and stop the ball from moving.
I put in a
var onTheMove = false;
and then set it to true when I click and drag the ball. It starts. However, when I put a check into onMouseUp and try to fire the ball.onmouseup event stuff, it doesn't work unless the mouse is over the ball. I'm trying to stop the ball from moving, even if the mouse isn't over it. I do this by commenting out the line:
This way the ball only moves up and down, not left to right, so the mouse drifts from the ball, which is ok, but I still want the ball to stop moving when I mouseup, or drop the ball.
Any thoughts or ideas here are greatly appreciated. I've done a lot of web development, but I seem to get stuck on these "events" things. I must not have something in the proper order/place. Thank you!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
</script>
<script language="JavaScript" type="text/javascript">
<!--
document._domino_target = "_self";
function _doClick(v, o, t) {
var returnValue = false;
var url="/xpagesext.nsf/testscrollbar?OpenPage&Click=" + v;
if (o.href != null) {
o.href = url;
returnValue = true;
} else {
if (t == null)
t = document._domino_target;
window.open(url, t);
}
return returnValue;
}
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" onmouseup="if (onTheMove == true) {
//stop the mousemove from happening, even if mouse up isn't over the ball.
onTheMove = false
}">
<form action=""><body>
<p>Drag the ball.</p>
<img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
<img src="https://en.js.cx/clipart/ball.svg" id="ball">
<script>
let currentDroppable = null;
var onTheMove = false;
ball.onmousedown = function(event) {
onTheMove = true;
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY = event.clientY - ball.getBoundingClientRect().top;
ball.style.position = 'absolute';
ball.style.zIndex = 1000;
document.body.append(ball);
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
ball.style.left = pageX - shiftX + 'px';
ball.style.top = pageY - shiftY + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
ball.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
ball.hidden = false;
if (!elemBelow) return;
}
document.addEventListener('mousemove', onMouseMove);
ball.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
};
};
ball.ondragstart = function() {
return false;
};
</script></form>
</body>
</html>
What I have tried:
calling "ball.mouseup" from the onMouseUp event.
I've tried just having onMouseUp just set the document.removeEventListener in ball.onmouseup.
Submit an article or tip