jQueryの - ズーム

Question

とドラッグ可能なdivがこれは私のコードです：

http://jsfiddle.net/652nk/

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

JS

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

CSSのzoomプロパティを使用する際に大きな問題があります。ターゲットのドラッグ可能なdivの位置は、カーソル位置と調整されません。

クリーンでシンプルなソリューションはありますか？私はズームを動的に変更できるはずです。

Answer 1

ズームプロパティを設定する必要はありません。私はちょうどズームプロパティのために発生する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年代とユスフ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）しかし、それは私が必要としたもののために働いた。

希望します。