As the title specifies, my website presents a weird effect when I am dragging elements. This only happens on iPhone; on Desktop and Android browsers it does not happen .
This is how it looks like:
I can paste a snippet containing the code to drag the elements, but I do not think it will help. This seems more of a OS specific thing I am not aware of.
Does anyone know why this might happen?
EDIT:
As an answer requested it, here is the code for the drag (superfluous stuff has been cut out):
private dragStart(e: UIEvent): void {
e.preventDefault();
e.stopPropagation();
this.dragInitial = Point.extractPagePointFromUiEvent(e);
this.dragActual = this.dragInitial.clone();
document.ontouchmove = (e1: TouchEvent) => this.elementDrag(e1);
document.ontouchend = () => this.dragEnd();
}
private elementDrag(e: UIEvent) {
const p = Point.extractPagePointFromUiEvent(e);
const actualX = this.goalTile.offsetLeft - this.dragActual.x + p.x;
const actualY = this.goalTile.offsetTop - this.dragActual.y + p.y;
this.goalTile.style.left = actualX + "px";
this.goalTile.style.top = actualY + "px";
this.dragActual = p;
}
private dragEnd(): void {
document.ontouchend = null;
document.ontouchmove = null;
if (this.dragInitial.equals(this.dragActual)) return;
this.updateGoal();
}
A possible source of the problem is changing the style of element(s) within a event handler. You can try something like this:
private requestID: long;
private elementDrag(e: UIEvent) {
const p = Point.extractPagePointFromUiEvent(e);
const actualX = this.goalTile.offsetLeft - this.dragActual.x + p.x;
const actualY = this.goalTile.offsetTop - this.dragActual.y + p.y;
this.dragActual = p;
if(this.requestID) cancelAnimationFrame(this.requestID);
this.requestID = requestAnimationFrame(() => {
this.requestID = null;
this.goalTile.style.left = actualX + "px";
this.goalTile.style.top = actualY + "px";
});
}
Hope this helps.
Edit: I realized a problem of my solution: the event handler will probably be called at a rate much higher than the DOM refresh rate, so we need to clear previously requested animation not yet run.
Edit 2: Code adapted to question edit
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.