通過觸摸拖動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/