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

Question

我有一种情况,里面div有可拖动的物品.但是,当div使用缩放父级时-webkit-transform,拖动显然会停止正常工作.

我在这里重现了这个场景.

如您所见,可拖动项目相对于文档移动,即使父项的比例完全不同.

我有缩放(1.5在示例中)作为JS中的变量,所以我可以使用它,但在哪里？我需要按比例划分拖动距离,对吗？我在哪里可以做到这一点？

编辑:我已经尝试将函数设置为drag-event,但无法弄清楚如何实际改变拖动距离.

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

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

如您所见,回调函数的返回值不以任何方式存储.在回调被触发后,元素的位置会发生变化,因此更改回调中的CSS不起作用.

你可以看到相关的代码在这里通过使用浏览器搜索以该字符串:

_mouseDrag: function(event, noPropagation) {

Answer 1

由于我对JavaScript的少量经验,我没有意识到回调实际上可以修改位置,即使它没有return任何东西.这是因为在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
        };

    }

});