通过触摸拖动 div - 非常慢

Question

我正在尝试制作可拖动的 div。

Javascript 代码片段：

document.getElementById('mySidenav').addEventListener('touchmove',
   function(event) {
       event.preventDefault();

       clickX = event.touches[event.touches[0].identifier].pageX;

       if(navigationOpen){          
        //draggable.style.width = Math.floor(clickX) + 'px';
        document.getElementById('mySidenav').setAttribute("style","width:"+ clickX + "px");
    }

}, false);

现在有2个问题：

1) 在我停止移动之前拖动不起作用（不一定是结束触摸）

2) <div> 移动时也有一点延迟。

我通过输出我的 clickX 来查看运动，它在 30fps

下工作正常

我是不是做错了什么？有办法吗？

更新：我是运行在 Android

上用 Cordova 编写的这个程序

Answer 1

您没有粘贴 HTML，所以这里只是一个可拖动的简单示例 div，它在触摸设备上运行得非常好。

var nodeList = document.getElementsByClassName('dragme');

for (var i = 0; i < nodeList.length; i++) {
  var obj = nodeList[i];
  obj.addEventListener('touchmove', function(event) {
    var touch = event.targetTouches[0];
    event.target.style.left = touch.pageX + 'px';
    event.target.style.top = touch.pageY + 'px';
    event.preventDefault();
  }, false);
}

.dragme {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: grey;
  border: 2px solid black;
}

<div class="dragme"></div>

这里没有鼠标事件，所以它只能在触摸时起作用，但希望这个例子对你有用。

Fiddle 一起玩：https://jsfiddle.net/thepio/fjmn0pej/

Answer 2

谢谢大家的帮助。出于某种原因，解决方案是从 CSS

中删除代码

.sideNav {
    ...
    ...

    transition: 0.5s; /* This */
}

但是现在当sideNav为closing/opening时没有流畅的动画:(

通过触摸拖动 div - 非常慢

Dragging a div via touch - very slow

html

javascript

css

touch