通过触摸拖动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>移动时，也有一点滞后。

我检查，看看通过outputing我clickX的运动，它在30fps的

工作正常，难道我做错了什么？有没有办法做到这一点？

更新： 我在科尔多瓦运行在Android

Answer 1

谢谢你们的帮助。出于某种原因，解决办法是从CSS

.sideNav { 
    ... 
    ... 

    transition: 0.5s; /* This */ 
} 

删除代码，但现在还没有流畅的动画时，sideNav正在关闭/打开:(

Answer 2

这个程序，你没有粘贴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>

这里没有鼠标事件，所以它只会在联系，但希望这个例子的工作可以对你有用。

小提琴玩弄：https://jsfiddle.net/thepio/fjmn0pej/