Wie erreicht man mit der CSS-Transformationsskala das korrekte jQuery-Zieh-/Größenänderungsverhalten?

JQuery Drag/Resize mit CSS-Transformationsskalierung korrigieren

Hintergrund

CSS-Transformationen anwenden auf Ein Element und die anschließende Verwendung der ziehbaren und in der Größe veränderbaren Plugins von jQuery für seine untergeordneten Elemente kann zu einer Fehlausrichtung zwischen dem Mauszeiger und dem gezogenen oder in der Größe geänderten Element führen. Dies ist auf den auf das Element angewendeten Skalierungsfaktor zurückzuführen.

jQuery-Patchlösung

Eine frühere Lösung bestand darin, die ziehbaren und in der Größe veränderbaren Plugins von jQuery zu patchen, um den Mausversatz durch anzupassen Skalierungsfaktor. Diese Methode erforderte eine Änderung des Quellcodes der Plugins.

Alternative Lösung: Callback-Handler

Eine alternative Lösung besteht darin, Callback-Handler zu verwenden, die von den skalierbaren und ziehbaren Plugins bereitgestellt werden. Dadurch entfällt die Notwendigkeit, jQuery zu patchen.

Resizable Fix

<br>$(this).resizable({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">minWidth: -(contentElem.width()) * 10,  
minHeight: -(contentElem.height()) * 10,  
resize: function(event, ui) {

    var changeWidth = ui.size.width - ui.originalSize.width; 
    var newWidth = ui.originalSize.width + changeWidth / zoomScale; 

    var changeHeight = ui.size.height - ui.originalSize.height; 
    var newHeight = ui.originalSize.height + changeHeight / zoomScale; 

    ui.size.width = newWidth;
    ui.size.height = newHeight;

}

Nach dem Login kopieren

});

Berechnen Sie im Größenänderungshandler die Änderung der Breite und Höhe, wenden Sie die Umkehrung des Zoommaßstabs an, um die neue Breite und Höhe anzupassen, und aktualisieren Sie die ui.size-Objekt entsprechend.

Draggable Fix

<br>$(this).draggable({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">handle: '.drag-handle',
start: function(event, ui) {
    ui.position.left = 0;
    ui.position.top = 0;
},
drag: function(event, ui) {

    var changeLeft = ui.position.left - ui.originalPosition.left; 
    var newLeft = ui.originalPosition.left + changeLeft / (( zoomScale)); 

    var changeTop = ui.position.top - ui.originalPosition.top; 
    var newTop = ui.originalPosition.top + changeTop / zoomScale; 

    ui.position.left = newLeft;
    ui.position.top = newTop;

}

Nach dem Login kopieren