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

}

});

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

}

});

Berechnen Sie im Drag-Handler die Änderung der linken und oberen Position, wenden Sie die Umkehrung der Zoomskala an, um die neue linke und obere Position anzupassen, und aktualisieren Sie die ui.positionieren Sie das Objekt entsprechend.

Fazit

Diese alternative Lösung mit Callback-Handlern bietet eine nicht-invasive Möglichkeit, das Drag-/Größenänderungsverhalten zu korrigieren, wenn CSS-Transformationen mit Skalierung vorgenommen werden angewendet.

Das obige ist der detaillierte Inhalt vonWie erreicht man mit der CSS-Transformationsskala das korrekte jQuery-Zieh-/Größenänderungsverhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!