jQuery – 带缩放的可拖动div

这是我的代码：

http://jsfiddle.net/652nk/

HTML

CSS

 #canvas { width:500px; height:250px; border:1px solid #444; zoom:0.7; } #dragme { width:100px; height:50px; background:#f30; } 

JS

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

使用css zoom属性时出现了一个主要问题。 目标可拖动div的位置与光标位置不协调。

有没有干净简单的解决方案？ 我应该能够动态地改变缩放。

Answer 1

您无需设置缩放属性。 我刚刚将差异添加到由于zoom属性而发生的draggable的位置。 希望能帮助到你。

小提琴

http://jsfiddle.net/TqUeS/

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

Answer 2

上面的解决方案对我没有用。 所以我找到了自己的。 如果其他人也有同样的问题，我想分享它。

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

Answer 3

我使用了tuze和Yusuf 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）但它适用于我需要的东西。

希望能帮助到你。