jQuery draggable with touch punch - flickering issue

Question

My draggable div becomes draggable on touch devices, but it "flickers" to weird positions when starting to move it. Works like a charm om desktop devices but not on iPad or Android.

Any suggestions for a solution?

Thanks in advance!

Answer 1

Unfortunately, I can't share the code since it will go into a product, and I am not able to reproduce the issue in a jsfiddle or similar.

But I have made a fix for the draggable flickering on touch devices, which I will share here if someone else encounters the problem.

---

var prevPos = null, diffX, diffY, maxDiff;

$( '#draggable' ).draggable( {
    ...,
    ...,
    drag: function ( event, ui ) {

        if ( prevPos ) {
            diffX = Math.abs( prevPos.left - ui.position.left );
            diffY = Math.abs( prevPos.top - ui.position.top );
            maxDiff = Math.max( diffX, diffY );
            if ( maxDiff > 60 ) {
                ui.position = prevPos;
            }
        }

        prevPos = ui.position;
    },
    stop: function ( event, ui ) {
        prevPos = null;
    } 
} );