Wie verwende ich die Draggable()- und Resizable()-Plugins von jQuery mit CSS-Transformationsskalierung für untergeordnete Elemente?

jQuery Drag/Resize mit CSS-Transformationsskalierung

Dieses Problem tritt auf, wenn eine CSS-Transformation mit Skalierung auf ein Element angewendet und dann die ziehbare Funktion von jQuery verwendet wird ()- und resizable()-Plugins für untergeordnete Elemente innerhalb dieses Elements. Das Problem besteht darin, dass die jQuery-basierten Änderungen aufgrund der angewendeten Skalierung „nicht synchron“ mit den Mausbewegungen erscheinen.

Originallösung

Es wurde eine gepatchte Lösung gefunden auf StackOverflow, der eine Änderung des jQuery-Plugins vorschlug. Insbesondere wurden die Funktionen _mouseStart() und _generatePosition() geändert, um der Skalierung Rechnung zu tragen:

• Monkey-gepatchtes _mouseStart(), um die Offset-Werte um einen Faktor anzupassen, der der angewendeten Skalierung entspricht.
• In _generatePosition() wurde die Bewegung basierend auf dem Skalierungsfaktor angepasst, um eine ordnungsgemäße Ausrichtung der gezogenen/in der Größe geänderten Elemente sicherzustellen.

Verbesserte Lösung

Anschließend wurde eine elegantere Lösung entdeckt, die eine Änderung von jQuery überflüssig macht. Bei diesem Ansatz werden Callback-Handler für die in der Größe veränderbaren und ziehbaren Ereignisse festgelegt:

Resizable:

$(this).resizable({
    // Set very large and negative minWidth and minHeight
    minWidth: -(contentElem.width()) * 10,
    minHeight: -(contentElem.height()) * 10, 
    resize: function(event, ui) {
        // Calculate the change in width and height
        var changeWidth = ui.size.width - ui.originalSize.width;
        var changeHeight = ui.size.height - ui.originalSize.height;

        // Adjust the new width and height by dividing the change by the zoomScale
        var newWidth = ui.originalSize.width + changeWidth / zoomScale;
        var newHeight = ui.originalSize.height + changeHeight / zoomScale;

        // Update the ui.size object with the adjusted values
        ui.size.width = newWidth;
        ui.size.height = newHeight;
    }
});

Draggable:

$(this).draggable({
    handle: '.drag-handle', // Specify a handle element for dragging
    start: function(event, ui) {
        // Reset the ui.position object to {left: 0, top: 0} at the start of the drag
        ui.position.left = 0;
        ui.position.top = 0;
    },
    drag: function(event, ui) {
        // Calculate the change in left and top positions
        var changeLeft = ui.position.left - ui.originalPosition.left;
        var changeTop = ui.position.top - ui.originalPosition.top;

        // Adjust the new left and top positions by dividing the change by the zoomScale
        var newLeft = ui.originalPosition.left + changeLeft / zoomScale;
        var newTop = ui.originalPosition.top + changeTop / zoomScale;

        // Update the ui.position object with the adjusted values
        ui.position.left = newLeft;
        ui.position.top = newTop;
    }
});

Durch die Verwendung dieser Callback-Handler funktionieren die ziehbaren und in der Größe veränderbaren Elemente nun korrekt innerhalb des skalierten Elements, ohne dass jQuery geändert oder komplexe Patch-Lösungen implementiert werden müssen.

Das obige ist der detaillierte Inhalt vonWie verwende ich die Draggable()- und Resizable()-Plugins von jQuery mit CSS-Transformationsskalierung für untergeordnete Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!