jQuery - div trascinabili con zoom

Questo è il mio codice:jQuery - div trascinabili con zoom

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

Ho un grosso problema quando utilizzo la proprietà css zoom. La posizione del div trascinabile target non è coordinata con la posizione del cursore.

Esiste una soluzione semplice e pulita? Dovrei essere in grado di cambiare lo zoom in modo dinamico.

fonte

2011-12-22 enloz

Ho visto questo: http://stackoverflow.com/questions/2930092/jquery-draggable-with-zoom-problem ... non molto di aiuto. – enloz

perché stai usando lo zoom? –

Perché non è di grande aiuto? Sembra essere esattamente il tuo problema. –

Non è necessario impostare la proprietà dello zoom. Ho appena aggiunto la differenza alla posizione di draggable che si verifica a causa della proprietà zoom. Spero che sia d'aiuto.

Fiddle

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

    }     
});

fonte

2011-12-22 17:40:07 tuze

Hm ... Grazie per una risposta, ma non funziona. Se imposto ad es. 'zoom: 0.4' ... http://jsfiddle.net/jtnQU/1/ – enloz

Il mio male. L'ho aggiornato. – tuze

La soluzione di cui sopra non ha funzionato per me. Così ho trovato il mio. Volevo condividerlo se anche qualcun altro ha lo stesso problema.

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

fonte

2014-10-23 23:08:36

funziona come un fascino –

Questa soluzione funziona, soprattutto no! –

Questa soluzione è ottima e dovrebbe essere accettata, perché rappresenta correttamente lo zoom del genitore contenitore. Grazie, Yusuf! – ryancdotnet

Ho usato entrambe le soluzioni di Yusuf Demirag di tuze ed e ha aggiunto un po 'di qualcosa per il trascinamento su una griglia:

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

Ha un bug minore (non a volte può arrivare a un valore esatto per esempio : 160px) ma ha funzionato per ciò di cui avevo bisogno.

Spero che aiuti.

fonte

2015-09-16 07:55:45 kriskate

jQuery - div trascinabili con zoom

risposta

Problemi correlati