javascript - jquery draggable 缩放问题

Question

我正在处理一个页面，其中的所有内容都使用缩放进行缩放。问题是，当我在页面中拖动某些内容时，拖动项的位置似乎与缩放量有关。

为了解决这个问题，我尝试对可拖动组件的位置进行一些数学运算，但似乎即使在视觉上对其进行了更正，也没有重新计算“真实”位置。

这里有一些代码可以更好地解释:

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

任何帮助将不胜感激

Answer 1

我花了很多时间和精力来解决这个问题，但最终，我找到了一个有效的解决方案。

此解决方案适用于 Firefox 和 IE。 #canvas 是包含可拖动对象的 div。请注意，我们必须手动确保元素保留在 Canvas 内。

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