Question

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

我已经复制了方案here。

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

我将规模（示例中为1.5）作为JS中的变量，所以我可以使用它，但在哪里？我需要按比例划分拖动距离，对吗？我在哪里可以做到这一点？

修改：我已尝试将功能设置为drag - 事件，但无法弄清楚如何实际改变拖动距离。

编辑2：我挖掘了jQuery UI源代码，似乎无法通过事件drag执行此操作：

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

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

您可以使用此字符串在浏览器中搜索来查看相关代码here：

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

    }

});

Answer 2

我认为你需要Transformable（http://plugins.jquery.com/project/transformable）jQuery插件，以便“规范化”WebKit缩放。然后拖动将像Firefox一样工作。

这是插件 - http://flin.org/js/jquery.transformable.js。我认为它应该可以解决你的问题。以下是我的代码版本：http://jsfiddle.net/vMaXm/4/

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

但是，此时，如果我取消注释中间线，我会报告相同的问题。

jQuery draggable和-webkit-transform：scale（）;

2 个答案: