Перетаскивание 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 и она отлично работает под 30к

Я делаю что-то не так? Есть ли способ сделать это?

UPDATE: Я бег этой программы в Кордове на 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>

Существует нет событий мыши здесь, так что она будет работать только на ощупь, но, надеюсь, это, например, может быть полезным для вас.

Fiddle играть с: https://jsfiddle.net/thepio/fjmn0pej/