jQuery的 - 可拖動的div變焦

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

$(function(){ 
    $('#dragme').draggable({containment:'parent'}) 
})

我使用css zoom屬性時遇到一個主要問題。目標可拖動div的位置與光標位置不一致。

有沒有簡潔的解決方案？我應該可以動態改變縮放比例。

來源

2011-12-22 enloz

我看過這個：http://stackoverflow.com/questions/2930092/jquery-draggable-with-zoom-problem ...沒有太多的幫助。 – enloz 2011-12-22 14:42:23

你爲什麼使用縮放？ – 2011-12-22 14:48:53

爲什麼它不是很有幫助？這似乎是你的問題。 – 2011-12-22 14:52:27

您不需要設置縮放屬性。我只是將差異添加到由於縮放屬性而出現的可拖動位置。希望能幫助到你。

小提琴

http://jsfiddle.net/TqUeS/

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 get outside 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(); 

    }     
});

來源

2011-12-22 17:40:07 tuze

嗯...感謝您的回答，但它不工作。如果我把例如'zoom：0.4' ... http://jsfiddle.net/jtnQU/1/ – enloz 2011-12-22 17:54:35

我的不好。我更新了它。 – tuze 2011-12-22 18:03:44

上述解決方案並沒有爲我工作了。所以我找到了我自己的。如果別人也有同樣的問題，我想分享它。

var zoom = $('#canvas').css('zoom');  
$('#dragme').draggable({ 
    drag: function(evt,ui) 
    { 
     var factor = (1/zoom) - 1 

     ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor) 
     ui.position.left += Math.round((ui.position.left - ui.originalPosition.left) * factor) 
    }     
});

來源

2014-10-23 23:08:36

就像一個魅力 – 2015-03-30 11:27:59

這個解決方案的作品，不是上面！ – 2017-03-23 12:26:54

該解決方案非常好，應該被接受，因爲它正確地解釋了放大的容器父級。感謝優素福！ – ryancdotnet 2017-09-01 22:13:16

我同時使用tuze的和優素福Demirag的解決方案，並加了一點東西拖在網格：

var gridSize = 20; 
$('#dragme').draggable({ 
    grid: [ gridSize , gridSize ], 
    snap: true, 
    snapTolerance: gridSize/2, 

    drag: function(event,ui){ 
     var factor = (1/zoom) -1; 

     ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor); 
     ui.position.top -= ui.position.top % gridSize; 
     ui.position.left += Math.round((ui.position.left- ui.originalPosition.left) * factor); 
     ui.position.left -= ui.position.left % gridSize; 


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

它有一個小錯誤（它有時不能得到一個確切的值，例如，：160px），但它爲我所需要的。

希望它有幫助。

來源

2015-09-16 07:55:45 kriskate

jQuery的 - 可拖動的div變焦

回答

相關問題