我正在一个女巫的页面上,所有的内容都通过缩放进行缩放.
问题在于,当我拖动页面中的某些东西时,拖动项目会看到相对于缩放量的不好的位置.
问题在于,当我拖动页面中的某些东西时,拖动项目会看到相对于缩放量的不好的位置.
为了解决这个问题,我试图对可拖动组件的位置做一些数学,但是看起来,即使在视觉上它被修正,“真实”的位置也没有被重新计算.
这里有一些代码来解释更好：
var zoom = Math.round((parseFloat($(“body”).css(“zoom”))/ 100)* 10)/ 10;
var x = $(this).data('draggable').position;
$(this).data('draggable').position.left = Math.round(x.left/zoom);
$(this).data('draggable').position.top = Math.round(x.top/zoom);
任何帮助将不胜感激
解决方法
花费大量的时间和精力来解决这个问题,但最后我有一个解决方案.
此解决方案适用于Firefox和IE. #canvas是包含draggable的div.请注意,我们必须确保元素手动保留在画布内.
如果canvas的缩放级别与页面的其余部分不同,这也是有效的.
var pointerX;
var pointerY;
$(c).draggable({
start : function(evt,ui) {
pointerY = (evt.pageY - $('#canvas').offset().top) / zoom - parseInt($(evt.target).css('top'));
pointerX = (evt.pageX - $('#canvas').offset().left) / zoom - parseInt($(evt.target).css('left'));
},drag : function(evt,ui) {
var canvasTop = $('#canvas').offset().top;
var canvasLeft = $('#canvas').offset().left;
var canvasHeight = $('#canvas').height();
var canvasWidth = $('#canvas').width();
// Fix for zoom
ui.position.top = Math.round((evt.pageY - canvasTop) / zoom - pointerY);
ui.position.left = Math.round((evt.pageX - canvasLeft) / zoom - pointerX);
// Check if element is outside 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();
// Finally,make sure offset aligns with position
ui.offset.top = Math.round(ui.position.top + canvasTop);
ui.offset.left = Math.round(ui.position.left + canvasLeft);
}
});
