僅在 iPhone 上拖動網站上的元素時的 WinXP 風格的拖動故障效果

Question

正如標題所指出的，當我拖動元素時，我的網站呈現出一種奇怪的效果。 這只發生在 iPhone 上； 在桌面和 Android 瀏覽器上它不會發生。

這是它的樣子：

我可以粘貼一個包含代碼的片段來拖動元素，但我認為這不會有幫助。 這似乎更像是我不知道的操作系統特定的事情。

有誰知道為什么會發生這種情況？

---

編輯：

作為要求的答案，這里是拖動的代碼（多余的東西已被刪除）：

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();
}

Answer 1

問題的一個可能來源是更改事件處理程序中元素的樣式。 你可以嘗試這樣的事情：

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";
    });
}

希望這可以幫助。

編輯：我意識到我的解決方案的一個問題：事件處理程序可能會以遠高於 DOM 刷新率的速率被調用，因此我們需要清除之前請求的 animation 尚未運行。

編輯 2：適用於問題編輯的代碼