jQuery可拖动和-webkit-transform:scale(); [英] jQuery draggable and -webkit-transform: scale();

问题描述

我遇到一种情况，在div内有可拖动的项目.但是，当使用-webkit-transform缩放父级div时，可拖动对象显然会停止正常工作.

I have a situation where inside a div there are draggable items. However, when the parent div is scaled using -webkit-transform, the draggable obviously stops working properly.

我在此处复制了场景.

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

As you can see, the draggable item moves relative to the document, even though the parent is in an entirely different scale.

我将小数位数(示例中为1.5)作为JS中的变量，因此可以使用它，但是在哪里?我需要将拖动距离除以比例，对吗?我在哪里可以做?

I have the scale (1.5 in the example) as a variable in JS, so I can use that, but where? I'd need to divide the dragging distance by the scale, right? Where could I do this?

编辑:我尝试将功能设置为drag -event，但是还没有弄清楚如何实际更改拖动距离.

I've tried setting a function to drag-event, but haven't been able to figure out how to actually alter the dragging distance.

Edit2 :我挖掘了jQuery UI的源代码，看来在事件drag中没有办法做到这一点:

I digged the jQuery UI source, and it seems that there's no way to do this from the event drag:

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

如您所见，回调函数的返回值未以任何方式存储.在触发回调后 更改元素的位置，因此更改回调内部的CSS不起作用.

As you can see, the return value of the callback-function isn't stored in any way. The position of the element is changed after the callback has fired, so changing the CSS inside the callback doesn't work.

您可以通过以下方式在此处查看相关代码.浏览器使用以下字符串进行搜索:

You can see the relevant code here by using in-browser search with this string:

_mouseDrag: function(event, noPropagation) {

推荐答案

由于我对JavaScript有少量的经验，所以我没有意识到回调实际上可以修改位置，即使它没有修改return任何事物.这是因为在JS中，显然默认情况下参数是通过引用传递的.

Due to my small amount of experience with JavaScript I didn't realise that the callback could in fact modify the position, even though it doesn't return anything. This is because in JS apparently parameters are by default passed by reference.

这是一个有效的代码:

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

    }

});

这篇关于jQuery可拖动和-webkit-transform:scale();的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！