Arrastrar/cambiar tamaño de jQuery con escala de transformación CSS

Problema: Al aplicar una transformación CSS, específicamente transformar: matriz (0.5, 0, 0, 0.5, 0, 0);, a un div y usando los complementos arrastrables() y resizable() de jQuery en elementos secundarios, la alteración realizada por jQuery "no está sincronizada" con la posición del mouse. &&&]

Solución: parchear los complementos de jQuery

Se encontró una solución parcheando los complementos de jQuery, específicamente los métodos _mouseStart y _generatePosition de $.ui.draggable. Este enfoque funcionó eficazmente pero requirió modificar el código del complemento original.

Solución alternativa: usar controladores de devolución de llamada

Sin embargo, se descubrió una solución más óptima que no requiere modificar el código del complemento. Complementos de jQuery directamente. Al utilizar controladores de devolución de llamada, es posible ajustar las posiciones y tamaños de los elementos arrastrables y redimensionables según la escala de zoom actual.

Transform Scale Fix for Resizable:

$(esto).resizable({ ancho mínimo: -(contentElem.width()) * 10, altura mínima: -(contentElem.height()) * 10, cambiar el tamaño: función (evento, ui) { //Ajusta el ancho y el alto según la escala de zoom 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 cambiarHeight / zoomScale; ui.size.width = nuevoAncho; ui.size.height = nuevaAltura; } });

$(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;
    }
});

Corrección de escala de transformación para arrastrable:

$(this).draggable({ manejar: '.arrastrar-mango', inicio: función (evento, ui) { ui.posición.izquierda = 0; ui.posición.arriba = 0; }, arrastrar: función (evento, interfaz de usuario) { // Ajusta las posiciones izquierda y superior según la escala de zoom var cambioIzquierda = ui.position.left - ui.originalPosition.left; var newLeft = ui.originalPosition.left cambiarIzquierda / (( zoomScale)); var changeTop = ui.position.top - ui.originalPosition.top; var newTop = ui.originalPosition.top changeTop / zoomScale; ui.position.left = nuevaIzquierda; ui.position.top = nuevoTop; } });

$(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;
    }
});

Este enfoque proporciona una solución limpia y no invasiva para manejar eventos de arrastre y cambio de tamaño dentro de elementos escalados usando jQuery sin modificar ninguna de sus funciones principales.