iOS中如何实现平滑拖拽效果？

编程问答 2022-06-01

问题描述

我正在移动项目中开发拖动效果。

我发现在iOS中开始拖动元素时，移动不流畅，会有一些抖动，手指拖动速度越慢越明显。但是我的安卓设备没有这个问题。

我写了一个demo，发现可能有两个原因：

  1. 随着拖动速度变慢，touchmove事件之间的间隔会变长；
  2. TouchEvent 中接触点的 clientX/clientY 是整数。

我想问一下，有没有什么办法可以让iOS中的拖拽效果更流畅？

这是我的演示页面（在移动浏览器中打开）：
https://codepen.io/BiosSun/full/vYXjwQj

以及演示的核心代码（只是一些拖动元素的通用代码）：

var initialPoint = undefined;

box.addEventListener("touchstart",touchstart,{ passive: false });

function touchstart(event) {
  event.preventDefault();
  var [touch] = event.touches;

  initialPoint = {
    clientX: touch.clientX,clientY: touch.clientY,};

  document.addEventListener("touchmove",touchmove,{ passive: false });
  document.addEventListener("touchend",touchend,{ passive: false });
  document.addEventListener("touchcancel",{ passive: false });
}

function touchmove(event) {
  event.preventDefault();
  var [touch] = event.touches;
  var point = {
    deltaX: touch.clientX - initialPoint.clientX,deltaY: touch.clientY - initialPoint.clientY,};
  box.style.transform = "translate(0px," + point.deltaY + "px)";
}

function touchend() {
  event.preventDefault();
  box.style.transform = "";
  document.removeEventListener("touchmove",{ passive: false });
  document.removeEventListener("touchend",{ passive: false });
  document.removeEventListener("touchcancel",{ passive: false });
}

以及演示的屏幕录制：

iOS

ios

安卓

android

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dragiosiosoptimizationtouchweb