jQuery - 可缩放的可拖动div

Question

这是我的代码：

http://jsfiddle.net/652nk/

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

JS

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

我在使用CSS的zoom属性时遇到了一个主要问题。目标可拖动div的位置与光标位置不协调。 有没有干净简单的解决方案？我应该能够动态更改缩放比例。

- enloz

---

我看过这个链接：https://dev59.com/bXA85IYBdhLWcg3wHv3B ...但并没有太大的帮助。 - enloz

为什么它没有太大的帮助？它似乎正是你的问题。 - Janus Troelsen

@TimBJames 我需要缩放（使其变小）一个包含其他可拖动div的div。 - enloz

@user309483，我无法将那个解决方案/答案运行起来。 - enloz

问题在于JavaScript无法计算具有“缩放”样式的div的宽度/高度。如果您查看可拖动div到达包含div的“边缘”的位置，那么如果div实际上是指定的宽度/高度，则是正确的。 - Tim B James

看看这个链接，你就会明白我的意思了。http://jsfiddle.net/652nk/28/ 这个jQuery使用的是它认为的元素实际宽度/高度/位置。 - Tim B James

Answer 1

您不需要设置缩放属性。我只是添加了由于缩放属性而导致的可拖动位置的差异。希望能帮到您。

示例演示：

http://jsfiddle.net/TqUeS/

JavaScript 代码：

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

    }                 
});

- tuze

---

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

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

- Yusuf Demirag

---

这个解决方案非常好，应该被接受，因为它正确地考虑了容器父级被缩放的情况。谢谢Yusuf！ - ryancdotnet

非常好的解决方案。运行得像魔法一样。谢谢。 - Pramesh Bajracharya

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

它有一个小错误(有时无法准确达到某个值，例如：160像素)，但对我所需的功能来说它可以工作。希望这可以帮助你。

- kriskate