仅在 iPhone 上拖动网站上的元素时的 WinXP 风格的拖动故障效果

Question

正如标题所示，当我拖动元素时，我的网站呈现出一种奇怪的效果。这只发生在 iPhone 上； 在桌面和 Android 浏览器上不会发生这种情况。

它是这样的：

我可以粘贴一个包含代码的 sn-p 来拖动元素，但我认为这不会有帮助。这似乎更像是我不知道的操作系统特定的事情。

有谁知道为什么会发生这种情况？

---

编辑：

作为一个答案要求它，这里是拖动的代码（多余的东西已被剪掉）：

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 刷新率的速率被调用，因此我们需要清除之前请求的尚未运行的动画。

编辑 2： 适合问题编辑的代码