jQuery Ziehen/Größe ändern mit CSS-Transformationsskalierung

Problem: Beim Anwenden einer CSS-Transformation, insbesondere transform: Matrix (0,5, 0, 0, 0,5, 0, 0); zu einem div hinzufügen und die Plugins Draggable() und Resizable() von jQuery für untergeordnete Elemente verwenden, 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 in der Größe 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;
    }
});

Transformationsskalierungskorrektur für 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 die Kernfunktionen zu ändern.