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

Question

我遇到了一个问题，就是在一个 div 内部有可拖动的项目。但是，当使用 -webkit-transform 缩放父级 div 时，可拖动的项目显然无法正常工作。

我在这里重现了这种情况（链接）。

如你所见，即使父级处于完全不同的比例中，可拖动的项目也会相对于文档移动。

我在JS中将缩放值（在示例中为1.5）作为变量，因此我可以使用它，但是在哪里？我需要将拖动距离除以比例吗？我该在哪里实现？

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

编辑2：我检查了 jQuery UI 的源代码，似乎没有办法从事件 drag 中实现此功能：

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

正如您所看到的，回调函数的返回值没有以任何方式存储。元素的位置在回调触发之后被改变，因此在回调函数内部更改CSS是无效的。

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

_mouseDrag: function(event, noPropagation) {

- Martti Laine

---

你的示例选项中不是缺少了“containment”吗？像这样：$('.draggable').draggable({ containment: "parent" }); 只有这样我才能重现你的问题。 - hyankov

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

Answer 1

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

    }

});

- Martti Laine

---

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

虽然这解决了缺陷限制的目的，但应用此代码后，可拖动对象的“父级”不起作用。您知道如何克服这个问题吗？ - Prateek Jain

@PrateekJain - 我修改了Martti的答案，以考虑包含关系（请参见http://stackoverflow.com/a/40196570/1009922）。 - ConnorsFan

@Martti Laine - 我建议在开始回调中存储缩放（又称比例尺）。我使用可调整大小的小部件来实现此方法，尽管使用的是ui.size和ui.originalSize。 - Borgboy

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上找到。

- Laith Hussein

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

​

不过，此时若我取消中间那行的注释，我会遇到你所报告的同样问题。

- hyankov

---

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