jQuery - draggable div与缩放 [英] jQuery - draggable div with zoom

问题描述

这是我的代码：

http://jsfiddle.net/652nk/

HTML

 < div id =画布> 
< 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

$ p> $（function（）{
$（'＃dragme'）。draggable（{containment：'parent'}）
}）


当使用css zoom 属性时，目标可拖动div的位置与光标位置不协调。

是否有任何干净简单的解决方案？ 。

解决方案

您不需要设置缩放属性。我刚刚添加的差异draggable的位置，这是由于缩放属性。希望它有帮助。

小提琴

http://jsfiddle.net/TqUeS/

JS

  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）; 
 
 //不要让draggable在画布之外
 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（）; 
 
} 
}）; 
  

This is my code:

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'})
})

I have a major issue when using css zoom property. Position of target draggable div is not coordinated with cursor position.

Is there any clean and simple solution? I should be able to change zoom dynamically.

解决方案

You don't need to set zoom property. I just added the difference to draggable's position which occurs due to the zoom property. Hope it helps.

Fiddle

http://jsfiddle.net/TqUeS/

JS

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 to get outside of 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();  

    }                 
});

这篇关于jQuery - draggable div与缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！