jQuery - przeciągalne div z zoomem

Question

To jest mój kod:

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

Mam poważny problem podczas korzystania z właściwości css zoom. Pozycja docelowego dającego się przeciągnąć elementu div nie jest skoordynowana z pozycją kursora.

Czy istnieje jakieś czyste i proste rozwiązanie? Powinienem móc dynamicznie zmieniać powiększenie.

Answer 1

Nie trzeba ustawiać właściwości zoomu. Właśnie dodałem różnicę do pozycji przeciągania, która występuje z powodu właściwości zoom. Mam nadzieję, że to pomoże.

Fiddle

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

Rozwiązanie powyżej nie wyszło mi. Więc znalazłem swój własny. Chciałem go udostępnić, jeśli ktoś inny również ma ten sam problem.

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

użyłem zarówno tuze i rozwiązania Yusuf Demirag i dodaje trochę coś dla przeciągania na siatce:

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

Ma drobny błąd (nie można czasami dostać się do dokładnej wartości, np : 160px), ale działało na to, czego potrzebowałem.

Mam nadzieję, że to pomaga.