The problem is my code works for computer browsers, but doesn't work for mobile browsers. My task is to hold my finger on an object, start moving my finger across the touch screen and see the smooth movement of the object on the screen, and when I release my finger, I can move some more objects, and not the same one. All events must take place in mobile browsers. I tried to use events such as touchmove, touchstart, but they don't work at all, since they are designed to work with touch displays.
<!DOCTYPE html>
<html>
<head>
<title>LogicBuilder</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*{
position: absolute;
}
#ball{
width:100px;
height:100px;
border-radius: 50%;
background-color: blue;
text-align: center;
position:absolute;
left:300px;
top:300px;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
<script>
ball.addEventListener('mousemove', function(event) { // (1) отследить нажатие
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
}
document.addEventListener('touchmove', onMouseMove);
document.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
};
});
</script>
</html>