Перетащите изображения на мобильные устройства с помощью javascript

Question

Привет, я хочу создать приложение javascript, где мне нужно перетаскивать изображения вокруг. Я разбил его до минимума здесь (работает только для сенсорных событий, необходимо JQuery):

\t \t var draggable = $("#draggable")[0]; 
 
\t \t draggable.x = 0; 
 
\t \t draggable.y = 0; 
 

 
\t \t $("#draggable").bind('touchstart', function(e) { 
 
\t \t draggable.lastmouse = e.originalEvent.touches[0]; 
 

 
\t \t }); 
 
\t \t $("#draggable").bind('touchmove', function(f) { 
 
\t \t f = f.originalEvent.touches[0]; 
 
\t \t var newx = draggable.x + (f.clientX - draggable.lastmouse.clientX); 
 
\t \t var newy = draggable.y + (f.clientY - draggable.lastmouse.clientY); 
 
\t \t draggable.x = newx; 
 
\t \t draggable.y = newy; 
 
\t \t $(draggable).css('transform', 'translate3d(' + newx + 'px,' + newy + 'px,0)'); 
 
\t \t draggable.lastmouse = f; 
 
\t \t });

<div class="map" id="draggable" style="width: 90%; height: 90%; position: absolute;"> 
 
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/3d/FuBK-Testbild.png" width="100%" height="100%"> 
 
</div>

На компьютере он работает гладко, но на моем GalaxyS4 его заикания, когда я перетащить изображение вокруг, хотя я использовал translate3d. Я думал, что это будет аппаратное ускорение.

Есть ли способ получить производительность на основе родного приложения?

Answer 1

Я сейчас иду с HTML5 холстом, его производительность намного лучше, чем мой старый подход, и мой код гораздо более интуитивный