jQuery arrastar/redimensionar com escala de transformação CSS

Problema: Ao aplicar uma transformação CSS, especificamente transform: matriz (0.5, 0, 0, 0.5, 0, 0);, para um div e usando os plug-ins draggable() e resizable() do jQuery em elementos filhos, a alteração feita pelo jQuery fica "fora de sincronia" com a posição do mouse.

Solução: Patching de plug-ins jQuery

Uma solução foi encontrada corrigindo os plug-ins jQuery, especificamente os métodos _mouseStart e _generatePosition de $.ui.draggable. Essa abordagem funcionou de maneira eficaz, mas exigiu a modificação do código original do plug-in.

Solução alternativa: usando manipuladores de retorno de chamada

No entanto, foi descoberta uma solução mais ideal que não requer modificação do Plug-ins jQuery diretamente. Ao utilizar manipuladores de retorno de chamada, é possível ajustar as posições e tamanhos de elementos arrastáveis ​​e redimensionáveis ​​com base na escala de zoom atual.

Correção de escala de transformação para redimensionável:

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

Correção de escala de transformação para arrastável:

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

Essa abordagem fornece uma solução limpa e não invasiva para lidar com eventos de arrastar e redimensionar em elementos dimensionados usando jQuery sem modificar nenhuma de suas funcionalidades principais.