There is a function that is responsible for moving, a circle on the touch events. But the problem is that the cursor then overtakes the circle itself, then it is lagging behind.

How to make the circle move evenly, following the finger, while not overtaking and not lagging behind?

The code itself:

var target; $('.circle').on("touchstart", function() { target = $(this); }); var moove = function (obj, x, y){ $(obj).css({"left" : x }); $(obj).css({"top" : y }); } $(window).on("touchmove", function(e) { moove($(target), event.targetTouches[0].screenX, event.targetTouches[0].screenY ); }); 
 .circle { width: 50px; height: 50px; border-radius: 100%; background: green; position: absolute; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="circle"> </div>

Feed: https://jsfiddle.net/dxnxpybe/21/

    1 answer 1

    And you tried to change screenX and screenY to clientX clientY , it seems like a circle follows your finger.

     var target; $('.circle').on("touchstart", function() { target = $(this); }); var moove = function (obj, x, y){ $(obj).css({"left" : x }); $(obj).css({"top" : y }); } $(window).on("touchmove", function(e) { moove($(target), event.targetTouches[0].clientX, event.targetTouches[0].clientY ); });

    https://jsfiddle.net/appcscme/1/