jQuery 可拖动和 -webkit-transform: scale();

Posted 2023-05-08

【中文标题】jQuery 可拖动和 -webkit-transform: scale();

【英文标题】：jQuery draggable and -webkit-transform: scale();

【发布时间】：2012-12-02 15:42:45

【问题描述】：

我有一种情况，在 div 中有可拖动的项目。但是，当父 div 使用 -webkit-transform 缩放时，draggable 显然无法正常工作。

我已经重现了here的场景。

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

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

编辑：我尝试将函数设置为drag-event，但无法弄清楚如何实际更改拖动距离。

Edit2：我挖了jQuery UI源码，从事件drag看来没有办法做到这一点：

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

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

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

_mouseDrag: function(event, noPropagation) 

【问题讨论】：

您的示例选项中是否缺少“遏制”？像这样： $('.draggable').draggable( contains: "parent" );​ 只有这样我才能重现您的问题。

你确定你没有看到这个问题吗？问题是被拖动的元素以不同的比例移动，因此比光标快或慢。

【参考方案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
        ;

    

);

【讨论】：

所有复杂类型（数组、对象）在 javascript 中都是通过引用传递的。这与参数无关:)

将此标记为答案！

虽然这解决了应用此代码后可拖动对象的目的错误包含“父级”不起作用。你知道如何克服吗？

@PrateekJain - 我改编了 Martti 的回答来解释收容措施（见 ***.com/a/40196570/1009922）。

@Martti Laine - 我建议将缩放（又名缩放）存储在开始回调中。我将此方法与可调整大小的小部件一起使用，尽管使用 ui.size 和 ui.originalSize。

【参考方案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 上可用

【参考方案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" );

​

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

【讨论】：

很遗憾我看不到想要的效果。似乎setTransform 只是将父级的大小调整回正常大小，尽管处于不同的位置。