jQuery - 具有缩放功能的可拖动 div答案

【问题标题】：jQuery - draggable div with zoomjQuery - 具有缩放功能的可拖动 div
【发布时间】：2012-01-26 04:29:07
【问题描述】：

这是我的代码：

HTML

<div id="canvas">
    <div id="dragme"></div>
</div>

CSS

#canvas {
    width:500px;
    height:250px;
    border:1px solid #444;
    zoom:0.7;
}
#dragme {
    width:100px;
    height:50px;
    background:#f30;
}

$(function(){
    $('#dragme').draggable({containment:'parent'})
})

我在使用 css zoom 属性时遇到了一个大问题。目标可拖动 div 的位置与光标位置不协调。

有什么干净简单的解决方案吗？我应该可以动态改变缩放。

【问题讨论】：

我看过这个：stackoverflow.com/questions/2930092/… ...帮助不大。
为什么没有多大帮助？这似乎正是你的问题。
@TimBJames 我需要缩放（使其更小）一个包含其他可拖动 div 的 div。
@user309483 我无法启动并运行该解决方案/答案。
问题归结为当 divs 具有样式 zoom 时，javascript 无法计算 divs 的宽度/高度。如果您查看可拖动 div 在到达包含 div 的“边缘”时的位置，那么如果 div 实际上是指定的宽度/高度是正确的

标签： jquery css jquery-ui zooming jquery-ui-draggable

【解决方案1】：

您不需要设置缩放属性。我只是将差异添加到由于缩放属性而发生的可拖动位置。希望对您有所帮助。

小提琴

http://jsfiddle.net/TqUeS/

var zoom = $('#canvas').css('zoom');
var canvasHeight = $('#canvas').height();
var canvasWidth = $('#canvas').width();

$('#dragme').draggable({
    drag: function(evt,ui)
    {
        // zoom fix
        ui.position.top = Math.round(ui.position.top / zoom);
        ui.position.left = Math.round(ui.position.left / zoom);

        // don't let draggable get outside the 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();  

    }                 
});

【讨论】：

嗯...感谢您的回答，但它不起作用。如果我设置例如zoom:0.4 ... jsfiddle.net/jtnQU/1

【解决方案2】：

上面的解决方案不适合我。所以我找到了自己的。如果其他人也有同样的问题，我想分享它。

var zoom = $('#canvas').css('zoom');    
$('#dragme').draggable({
    drag: function(evt,ui)
    {
         var factor = (1 / zoom) - 1

         ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor)
         ui.position.left += Math.round((ui.position.left - ui.originalPosition.left) * factor)   
    }                 
});

【讨论】：

这个解决方案很棒，应该被接受，因为它正确地解释了被缩放的容器父级。谢谢优素福！
非常好的解决方案。奇迹般有效。谢谢

【解决方案3】：

我同时使用了 tuze 和 Yusuf Demirag 的解决方案，并添加了一些用于在网格上拖动的内容：

var gridSize = 20;
$('#dragme').draggable({
    grid: [ gridSize , gridSize ],
    snap: true,
    snapTolerance: gridSize/2,

    drag: function(event,ui){
         var factor = (1 / zoom) -1;

         ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor);
         ui.position.top -= ui.position.top % gridSize;
         ui.position.left += Math.round((ui.position.left- ui.originalPosition.left) * factor);
         ui.position.left -= ui.position.left % gridSize;


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

它有一个小错误（有时无法达到精确值，例如：160px），但它可以满足我的需要。

希望对你有帮助。

【讨论】：