jQuery - div kéo với zoom

Question

Đây là mã của tôi:

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

Tôi gặp vấn đề lớn khi sử dụng thuộc tính css zoom. Vị trí của div có thể kéo mục tiêu không được phối hợp với vị trí con trỏ.

Có giải pháp sạch và đơn giản nào không? Tôi có thể thay đổi zoom động.

Answer 1

Bạn không cần đặt thuộc tính thu phóng. Tôi chỉ cần thêm sự khác biệt vào vị trí của draggable xảy ra do thuộc tính zoom. Hy vọng nó giúp.

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

Các giải pháp trên không làm việc ra cho tôi. Vì vậy, tôi tìm thấy của riêng tôi. Tôi muốn chia sẻ nó nếu người khác cũng có cùng một vấn đề.

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

tôi đã sử dụng cả hai giải pháp Yusuf Demirag của của tuze và và thêm một chút gì đó cho kéo vào một mạng lưới:

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

Nó có một lỗi nhỏ (nó không thể đôi khi có được một giá trị ví dụ chính xác : 160px) nhưng nó hoạt động cho những gì tôi cần.

Hy vọng điều đó sẽ hữu ích.