jQuery draggable and -webkit-transform: scale();

Question

I have a situation where inside a div there are draggable items. However, when the parent div is scaled using -webkit-transform, the d

Answer 1

I think you need the Transformable (http://plugins.jquery.com/project/transformable) jQuery plugin, in order to 'normalize' the WebKit scaling. Then dragging will work as in Firefox.

Here is the plugin - http://flin.org/js/jquery.transformable.js. I think it should resolve your problem. Here is my version of your code: http://jsfiddle.net/vMaXm/4/

$("#parent").setTransform("scalex", 1.5);
//$("#parent").setTransform("scaley", 1.5);
$('.draggable').draggable({ containment: "parent" });

​

However, at this moment, if I uncomment the middle line I get the same problem you report.

Answer 2

Due to my small amount of experience with JavaScript I didn't realise that the callback could in fact modify the position, even though it doesn't return anything. This is because in JS apparently parameters are by default passed by reference.

Here's a working code:

// Couldn't figure out a way to use the coordinates
// that jQuery also stores, so let's record our own.
var click = {
    x: 0,
    y: 0
};

$('.draggable').draggable({

    start: function(event) {
        click.x = event.clientX;
        click.y = event.clientY;
    },

    drag: function(event, ui) {

        // This is the parameter for scale()
        var zoom = 1.5;

        var original = ui.originalPosition;

        // jQuery will simply use the same object we alter here
        ui.position = {
            left: (event.clientX - click.x + original.left) / zoom,
            top:  (event.clientY - click.y + original.top ) / zoom
        };

    }

});