html div draggable,jQuery – 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();

}

});