jQuery Drag/Resize with CSS Transform Scale
Problem: Beim Anwenden einer CSS-Transformation, insbesondere transform:matrix (0,5, 0, 0, 0,5, 0, 0);, zu einem div und unter Verwendung der Draggable()- und Resizable()-Plugins von jQuery für untergeordnete Elemente wird die von jQuery vorgenommene Änderung „nicht mehr synchron“ mit der Mausposition.
Lösung: jQuery-Plugins patchen
Eine Lösung wurde durch Patchen der jQuery-Plugins gefunden, insbesondere der Methoden _mouseStart und _generatePosition von $.ui.draggable. Dieser Ansatz funktionierte effektiv, erforderte jedoch eine Änderung des ursprünglichen Plugin-Codes.
Alternative Lösung: Verwendung von Callback-Handlern
Es wurde jedoch eine optimalere Lösung gefunden, die keine Änderung erfordert jQuery-Plugins direkt. Durch die Verwendung von Callback-Handlern ist es möglich, die Positionen und Größen von ziehbaren und veränderbaren Elementen basierend auf dem aktuellen Zoommaßstab anzupassen.
Transform Scale Fix for Resizable:
$(this).resizable({ minWidth: -(contentElem.width()) * 10, minHeight: -(contentElem.height()) * 10, resize: function(event, ui) { // Adjust width and height based on zoom scale 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; } });
Transform Scale Fix for Draggable:
$(this).draggable({ handle: '.drag-handle', start: function(event, ui) { ui.position.left = 0; ui.position.top = 0; }, drag: function(event, ui) { // Adjust left and top positions based on zoom scale 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; } });
Dieser Ansatz bietet eine saubere und nicht-invasive Lösung für die Handhabung von Drag- und Größenänderungsereignissen innerhalb skalierter Elemente mithilfe von jQuery, ohne eines davon zu ändern Kernfunktionalität.
Das obige ist der detaillierte Inhalt vonWie behebe ich jQuery-Probleme beim Ziehen/Ändern der Größe mit CSS Transform Scale?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!