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

Expanding on "raghugolconda" top answer:

I've had dragging speed and jumping problems with jQueryUI draggable and CSS transform: scale()

The image container is scalable with zoom slider, the red square is draggable.

What happened when i tried to drag the red element:

• Element jumped when you tried to drag it
• Drag speed was too low when Zoom was over 100%
• Drag speed was too fast when Zoom was under 100%

Fix:

1. Calculate fraction (scale value) from jQuery slider. Here is my slider than transforms image container:

   var fraction = 1;  
   
   $("#slider").slider({
       value: 0,
       min: -70,
       max: 70,
       step: 10,
       slide: function (event, ui) {
           fraction = (1 + ui.value / 100);  
   
           $("#infoSlider").text('Zoom: ' + Math.floor(fraction * 100) + '%');
   
           $('.image_scalable_container').css({
               '-webkit-transform': 'scale(' + fraction + ')',
               '-moz-transform': 'scale(' + fraction + ')',
               '-ms-transform': 'scale(' + fraction + ')',
               '-o-transform': 'scale(' + fraction + ')',
               'transform': 'scale(' + fraction + ')'
           });
   
       }
   });
   

2. Overwrite jQuery UI draggable drag and start functions.

In drag you modify the dragging speed (scale 0.9 means drag_speed = 1 / 0.9 = 1.11 )

Here is my example:

$("#marker").draggable({
    //revert: true,
    zIndex: 100,
    drag: function (event, ui) {
        var drag_speed = 1 / fraction;

        __dx = (ui.position.left - ui.originalPosition.left) * drag_speed;
        __dy = (ui.position.top - ui.originalPosition.top) * drag_speed;
        ui.position.left = ui.originalPosition.left + (__dx);
        ui.position.top = ui.originalPosition.top + (__dy);            
        ui.position.left += __recoupLeft;
        ui.position.top += __recoupTop;
    },        
    start: function (event, ui) {            
        //resize bug fix ui drag
        var left = parseInt($(this).css('left'), 10);
        left = isNaN(left) ? 0 : left;
        var top = parseInt($(this).css('top'), 10);
        top = isNaN(top) ? 0 : top;
        __recoupLeft = left - ui.position.left;
        __recoupTop = top - ui.position.top;
    },
});