7

我有一种情况，里面div有可拖动的项目。但是，当div使用 缩放父级时-webkit-transform，draggable 显然会停止正常工作。

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

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

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

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

Edit2：我挖掘了 jQuery UI 源，似乎没有办法从事件中做到这一点drag：

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

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

您可以通过使用此字符串的浏览器内搜索在此处查看相关代码：

_mouseDrag: function(event, noPropagation) {
4

3 回答 3

25

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

    }

});
于 2012-12-15T10:20:00.650 回答
0

我知道我的答案来得太晚了，这个问题是 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上可用

于 2021-08-16T18:12:35.353 回答
-1

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

​</p>

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

于 2012-12-14T16:22:14.897 回答