// from https://www.chestysoft.com/imagefile/javascript/get-coordinates.asp
function findPosition(oElement) {
if(typeof( oElement.offsetParent ) != "undefined") {
for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
return [ posX, posY ];
} else {
return [ oElement.x, oElement.y ];
}
}
function handleMove(evt) {
evt.preventDefault();
let touches = evt.changedTouches;
let x,y;
let myElement = document.getElementById("hierDieIdDesElementsEinsetzen"); // oder einfach this verwenden (das Element, das den Event ausgelöst hat).
if (touches) {
let padcoords = findPosition(myElement);
x = touches[0].pageX-padcoords[0];
y = touches[0].pageY-padcoords[1];
} else {
let bb = myElement.getBoundingClientRect();
x = evt.clientX - bb.x;
y = evt.clientY - bb.y;
}
// x,y sind die Koordinaten relativ zum Element
if (evt.buttons !== 0 && evt.type!=="touchend" && evt.type!="touchcancel") { // Mausknopf gedrückt oder Touch nicht fertig
// Tu was
}
}
function setupTouches(el) {
el.addEventListener("touchstart", handleMove, true);
el.addEventListener("touchmove", handleMove, true);
el.addEventListener("touchend", handleMove, true);
el.addEventListener("touchcancel", handleMove, true);
el.addEventListener("mousemove", handleMove, true);
el.addEventListener("dragstart", handleMove, true);
el.addEventListener("dragmove", handleMove, true);
el.addEventListener("dragend", handleMove, true);
el.addEventListener("click", handleMove, true);
}