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

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

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

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

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

编辑:我已经尝试设置一个函数来drag事件,但还是无法弄清楚如何实际改变拖动距离。

Edit2:我挖掘了jQuery UI源代码,似乎没有办法从事件drag执行此操作:

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

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

您可以在此处使用此字符串使用浏览器内搜索来查看相关代码:

 _mouseDrag: function(event, noPropagation) { 

由于我对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 }; } }); 

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

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