jQuery可拖动和-webkit转换：scale（）；

我有一种情况，在

div

中有可拖动的项目。但是，当使用

-webkit transform

缩放父级

div

时，draggable显然会停止正常工作

我复制了这个场景

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

我在JS中使用了scale（

1.5

）作为变量，所以我可以使用它，但是在哪里呢？我需要将拖动距离除以比例，对吗？我在哪里可以这样做

编辑：我已尝试将函数设置为“拖动”-event，但无法确定如何实际更改拖动距离

Edit2:我挖掘了jQuery UI源代码，似乎无法从事件

拖动
：

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

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

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

_mouseDrag: function(event, noPropagation) {

我认为你需要一个可转换的(http://plugins.jquery.com/project/transformable)jQuery插件，用于“规范化”WebKit缩放。然后拖动将像在Firefox中一样工作

这是插件-。我认为这应该能解决你的问题。以下是我的代码版本：

​

然而，此时，如果我取消注释中间行，我会遇到与您报告的问题相同的问题。
由于我对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
        };

    }

});

您的示例中的选项中没有“包含”吗？像这样：$（'.draggable'）.draggable（{containment:“parent”}）；​ 只有这样我才能复制你的问题。你确定没有这个你就看不到问题吗？问题是被拖动的元素以不同的比例移动，因此比光标移动得更快或更慢。不幸的是，我看不到想要的效果。似乎
setTransform
只是将父对象的大小调整回正常大小，尽管处于不同的位置。所有复杂类型（数组、对象）都是在javascript中通过引用传递的。这与参数无关：）将此标记为答案！虽然这解决了应用此代码后DragTable的bug包含“父级”不起作用的问题。你知道如何克服这个问题吗？@PrateekJain-我修改了Martti的答案来解释包容（请参阅）。@Martti Laine-我建议将缩放（也称为缩放）存储在开始回调中。我将此方法用于可调整大小的小部件，尽管是ui.size和ui.originalSize。
// 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
        };

    }

});