jQuery UI Draggable + CSS Transform Causes “Jumping”

Question

EDIT: I solved it. But StackOverflow isn\'t letting me mark my answer as the solution, so I simply am not going to.

I\'m having an issue with regard to

Answer 1

position:absolute; is indeed problematic. I however found an alternative solution that prevents the jump, while keeping an absolute basis for coordinates and maintain position, by flipping the css position to relative on mousedown, and restore it to absolute on mouseup, such as the following:

$('#container').on('mousedown', 'canvas', function (e) {
    e.currentTarget.style.position = 'relative';
}).on('mouseup', 'canvas', function (e) {
    if (e.currentTarget.style.position !== 'absolute'){
        e.currentTarget.style.position = 'absolute';
    }
});

It works well for mouse events. And to resolve the issue for touch events, along with the 'touchpunch' plugin, I additionally also had to cancel 'click' events (for mobile and touch enabled modality only).