jQuery – draggable div与缩放

这是我的代码：

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缩放属性时,我有一个主要问题.目标draggable 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);

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

    }                 
});