Jquery draggable与缩放问题 [英] Jquery draggable with zoom problem

问题描述

我在一个页面上工作，所有的内容都通过缩放缩放。
问题是，当我拖动页面中的东西拖动项目得到一个不好的位置，看起来相对于缩放量。

I am working on a page in witch all its contents are scaled by using zoom. The problem is that when I drag something in the page the dragging item gets a bad position that seems relative to the zoom amount.

为了解决这个问题，我试过对可拖动组件的位置做一些数学，但似乎即使在视觉上它的更正，真正的位置它不重新计算。

To solve this I tried to do some math on the position of the draggable component, but seems that even tho visually its corrected, the "true" position its not recalculated.

这里是一些代码解释更好：

here is some code to explain better:

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

任何帮助将非常感谢。

推荐答案

花费了大量的时间和精力来解决这个问题，但最后，我有一个工作的解决方案。

Took a lot of time and effort to fix this, but finally, I have a solution that works.

Firefox和IE。 #canvas是包含draggable的div。注意，我们必须确保元素手动保留在画布内。

This solution works for both Firefox and IE. #canvas is the div that contains the draggable. Note that we have to make sure the elements stays inside the canvas manually.

如果画布的缩放级别与页面其他部分不同，这也适用。

This also works if if canvas has a different zoom level than the rest of the page.

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

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