jQuery 可拖动和-webkit-transform : scale();

Question

我遇到的情况是，div 内有可拖动的项目。但是，当使用 -webkit-transform 缩放父 div 时，可拖动对象显然会停止正常工作。

我重现了该场景 here .

正如您所看到的，可拖动项目相对于文档移动，即使父项目的比例完全不同。

我将比例(示例中的1.5)作为JS中的变量，所以我可以使用它，但是在哪里？我需要将拖动距离除以比例，对吗？我可以在哪里执行此操作？

编辑:我尝试将函数设置为拖动事件，但无法弄清楚如何实际更改拖动距离。

Edit2:我挖掘了 jQuery UI 源代码，似乎没有办法从事件 drag 中做到这一点:

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

如您所见，回调函数的返回值不以任何方式存储。回调触发后，元素的位置发生了更改，因此更改回调内的 CSS 不起作用。

可以看到相关代码here通过使用带有此字符串的浏览器内搜索:

_mouseDrag: function(event, noPropagation) {

Answer 1

由于我对 JavaScript 的经验很少，我没有意识到回调实际上可以修改位置，即使它不返回任何内容。这是因为在 JS 中显然参数默认是通过引用传递的。

这是一个工作代码:

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

    }

});