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

Question

我有一种情况，在div中有可拖动的项。然而，当使用-webkit-transform缩放父div时，可拖动对象显然停止正常工作。

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

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

我在JS中有scale(示例中为1.5)作为变量，所以我可以使用它，但在哪里？我需要将拖动距离除以比例，对吧？我在哪里可以这样做？

编辑：我已经尝试将函数设置为drag-事件，但还不知道如何实际更改拖动距离。

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

Answer 2

我知道我的答案太晚了，这个问题是8年前发布的，但我昨天就遇到了，我在网上找不到任何解决方案。

这是我在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!
}
});

我调用的函数在我的github 上可用

Answer 3

我认为您需要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" });

​

然而，此时此刻，如果我取消对中间一行的注释，我会遇到与您报告的问题相同的问题。