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 draggable obviously stops working properly.

I've reproduced the scenario here.

As you can see, the draggable item moves relative to the document, even though the parent is in an entirely different scale.

I have the scale (1.5 in the example) as a variable in JS, so I can use that, but where? I'd need to divide the dragging distance by the scale, right? Where could I do this?

Edit: I've tried setting a function to drag-event, but haven't been able to figure out how to actually alter the dragging distance.

Edit2: I digged the jQuery UI source, and it seems that there's no way to do this from the event drag:

if(this._trigger('drag', event, ui) === false) {
    this._mouseUp({});
    return false;
}

As you can see, the return value of the callback-function isn't stored in any way. The position of the element is changed after the callback has fired, so changing the CSS inside the callback doesn't work.

You can see the relevant code here by using in-browser search with this string:

_mouseDrag: function(event, noPropagation) {

Answer 1

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
        };

    }

});

Answer 2

I know my answer is so late, this issue is posted 8 years ago but I did face it just yesterday, and I couldn't find any solution online.

Here's my solution on GitHub

var element_inside_the_scaled_container = $('#element');

$(element_inside_the_scaled_container).draggable({

    drag: function (event, ui) {

        var constants = normalize_ui_position('#elem_container', UI);

        console.log(constants); // They could be useful!

    }

});

The function I've called is available on my github

Answer 3

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.