这是我的代码：
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的位置.希望它有帮助.
小提琴
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();
}
});
