Javascript 带缩放问题的Jquery可拖动

我在一个页面上工作，它的所有内容都是通过缩放来缩放的。 问题是，当我拖动页面中的某个内容时，拖动项的位置不好，似乎与缩放量有关

为了解决这个问题，我试图对可拖动组件的位置进行一些数学计算，但似乎即使在视觉上对其进行了纠正，“真实”位置也不会重新计算

这里有一些代码可以更好地解释：

var zoom=Math.round（（parseFloat（$（（“body”）.css（“zoom”））/100）*10

var x = $(this).data('draggable').position;
$(this).data('draggable').position.left = Math.round(x.left/zoom);
$(this).data('draggable').position.top = Math.round(x.top/zoom);

非常感谢您的帮助
您是否考虑了滚动位置、边距和填充？例如：

x.left + 
parseInt($(this).css('margin-left')) + 
parseInt($(this).css('padding-left')) + 
parseInt($(this).parent().scrollLeft());

x.top + 
parseInt($(this).css('margin-top')) + 
parseInt($(this).css('padding-top')) + 
parseInt($(this).parent().scrollTop());

然后根据需要调整缩放值？
花了很多时间和精力来解决这个问题，但最后，我找到了一个可行的解决方案

此解决方案适用于Firefox和IE。canvas是包含可拖动的div。注意，我们必须手动确保元素保持在画布内

如果画布的缩放级别与页面的其余部分不同，也可以使用此选项

var pointerX;
var pointerY;
$(c).draggable({
  start : function(evt, ui) {
    pointerY = (evt.pageY - $('#canvas').offset().top) / zoom - parseInt($(evt.target).css('top'));
    pointerX = (evt.pageX - $('#canvas').offset().left) / zoom - parseInt($(evt.target).css('left'));
  },
  drag : function(evt, ui) {
    var canvasTop = $('#canvas').offset().top;
    var canvasLeft = $('#canvas').offset().left;
    var canvasHeight = $('#canvas').height();
    var canvasWidth = $('#canvas').width();

    // Fix for zoom
    ui.position.top = Math.round((evt.pageY - canvasTop) / zoom - pointerY); 
    ui.position.left = Math.round((evt.pageX - canvasLeft) / zoom - pointerX); 

    // Check if element is outside canvas
    if (ui.position.left < 0) ui.position.left = 0;
    if (ui.position.left + $(this).width() > canvasWidth) ui.position.left = canvasWidth - $(this).width();  
    if (ui.position.top < 0) ui.position.top = 0;
    if (ui.position.top + $(this).height() > canvasHeight) ui.position.top = canvasHeight - $(this).height();  

    // Finally, make sure offset aligns with position
    ui.offset.top = Math.round(ui.position.top + canvasTop);
    ui.offset.left = Math.round(ui.position.left + canvasLeft);
  }
});

var-pointerX；
变量指针；
$（c）.可拖动({
开始：功能（evt、ui）{
pointerY=（evt.pageY-$（'#canvas'）.offset（）.top）/zoom-parseInt（$（evt.target）.css（'top'）；
pointerX=（evt.pageX-$（'#canvas'）.offset（）.left）/zoom-parseInt（$（evt.target.css（'left'））；
},
拖动：函数（evt、ui）{
var canvasTop=$（'#canvas'）.offset（）.top；
var canvasleet=$（'#canvas'）.offset（）.left；
var canvasHeight=$（'#canvas'）.height（）；
var canvasWidth=$（'#canvas'）.width（）；
//修正变焦
ui.position.top=Math.round（（evt.pageY-canvasTop）/zoom-pointerY）；
ui.position.left=Math.round（（evt.pageX-canvaslight）/zoom-pointerX）；
//检查元素是否在画布外部
如果（ui.position.left<0）ui.position.left=0；
如果（ui.position.left+$（this.width（）>canvasWidth）ui.position.left=canvasWidth-$（this.width（）；
如果（ui.position.top<0）ui.position.top=0；
如果（ui.position.top+$（this.height（）>canvashheight）ui.position.top=canvashheight-$（this.height（）；
//最后，确保偏移与位置对齐
ui.offset.top=Math.round（ui.position.top+canvasTop）；
ui.offset.left=Math.round（ui.position.left+canvaslight）；
}
});
我为此挣扎了几个小时。我有一个网格，我开始通过设置字体大小（容器上的125%等）来缩放它。这很有效，直到我看到的图像与网格不匹配

我想我应该用zoom来代替它，它工作得非常出色。然后我重新认识到，Dragable/Dropable并没有用它来缩放。。花几个小时尝试销毁并重新初始化jqueryUI对象，但没有任何效果

最后我意识到我可以结合使用字体大小来缩放网格和css缩放图像。现在一切都正常了，我可以用同一个jQueryUI实例进行拖放

希望此方法对其他人有所帮助。：-）
 如果CSS缩放是专门在html主体上执行的，有一个非常简单的修复方法，但它确实需要您修改源代码。这对一些人来说是不可能的，但我还是会在这里发布解决方案

因此jQueryUI的可拖动功能使用名为
\u generatePosition
的方法计算鼠标位置。问题是它没有考虑缩放（duh），因此我们只需将其结果除以缩放级别，一切都将正常运行

那么，把这个翻过来：

    return {
        top: (

            // The absolute mouse position
            pageY -

            // Click offset (relative to the element)
            this.offset.click.top -

            // Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.relative.top -

            // The offsetParent's offset without borders (offset + border)
            this.offset.parent.top +
            ( this.cssPosition === "fixed" ?
                -this.offset.scroll.top :
                ( scrollIsRootNode ? 0 : this.offset.scroll.top ) )
        )/ ,
        left: (

            // The absolute mouse position
            pageX -

            // Click offset (relative to the element)
            this.offset.click.left -

            // Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.relative.left -

            // The offsetParent's offset without borders (offset + border)
            this.offset.parent.left +
            ( this.cssPosition === "fixed" ?
                -this.offset.scroll.left :
                ( scrollIsRootNode ? 0 : this.offset.scroll.left ) )
        )
    };

在

就这些。我建议将它保存在一个特定的名称下，这样就可以很容易地识别它已被修改。例如：
jqueryui.ZOOMFIX.js

我使用了以下包中的
jqueryui.js
文件：
您能提供一个有效的JSFIDLE链接吗？如果您有问题8605439，我们将不胜感激。我也有同样的问题。缩放是百分比还是实际值？我已经很久没有这么做了，但看看代码，它一定是（浮动）值，其中1.0是100%缩放。试试看！太好了，这也解决了我的问题。唯一的问题是，在滚动之后，拖动的项目会以某种方式移动到顶部。对于未来的读者，请先尝试@Yusuf Demirag answer（它在下面的某个地方），因为这也适用于滚动。（也是简短的）计算是好的，offset（）的返回值是错误的。当zoom不是1.0时，top是错误的。这个答案与这个问题有什么关系？@sg7 OP正在寻求一个解决方案，解决jQuery UI中位置不正确的拖动问题。我的答案提供了一个解决方案，可以用jqueryui修复位置不正确的拖动。Synce我的答案回答了我认为足够相关的问题。供将来参考-如果有人遇到同样的问题-可以找到类似的问题+工作答案。
    return {
        top: (

            // The absolute mouse position
            pageY -

            // Click offset (relative to the element)
            this.offset.click.top -

            // Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.relative.top -

            // The offsetParent's offset without borders (offset + border)
            this.offset.parent.top +
            ( this.cssPosition === "fixed" ?
                -this.offset.scroll.top :
                ( scrollIsRootNode ? 0 : this.offset.scroll.top ) )
        )/ ,
        left: (

            // The absolute mouse position
            pageX -

            // Click offset (relative to the element)
            this.offset.click.left -

            // Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.relative.left -

            // The offsetParent's offset without borders (offset + border)
            this.offset.parent.left +
            ( this.cssPosition === "fixed" ?
                -this.offset.scroll.left :
                ( scrollIsRootNode ? 0 : this.offset.scroll.left ) )
        )
    };

    var zoomLevel = parseFloat($('body').css("zoom") || "1.0");

    return {
        top: (

            // The absolute mouse position
            pageY -

            // Click offset (relative to the element)
            this.offset.click.top -

            // Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.relative.top -

            // The offsetParent's offset without borders (offset + border)
            this.offset.parent.top +
            ( this.cssPosition === "fixed" ?
                -this.offset.scroll.top :
                ( scrollIsRootNode ? 0 : this.offset.scroll.top ) )
        ) / zoomLevel,
        left: (

            // The absolute mouse position
            pageX -

            // Click offset (relative to the element)
            this.offset.click.left -

            // Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.relative.left -

            // The offsetParent's offset without borders (offset + border)
            this.offset.parent.left +
            ( this.cssPosition === "fixed" ?
                -this.offset.scroll.left :
                ( scrollIsRootNode ? 0 : this.offset.scroll.left ) )
        ) / zoomLevel
    };