Wie behebe ich jQuery-Probleme beim Ziehen/Ändern der Größe mit CSS Transform Scale?

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!