jQuery Drag/Resize with CSS Transform Scale

Problem: When applying a CSS transform, specifically transform: matrix(0.5, 0, 0, 0.5, 0, 0);, to a div and using jQuery's draggable() and resizable() plugins on child elements, the alteration made by jQuery becomes "out of sync" with the mouse position.

Solution: Patching jQuery Plugins

A solution was found by patching the jQuery plugins, specifically the _mouseStart and _generatePosition methods of $.ui.draggable. This approach worked effectively but required modifying the original plugin code.

Alternative Solution: Using Callback Handlers

However, a more optimal solution was discovered that does not require modifying the jQuery plugins directly. By utilizing callback handlers, it is possible to adjust the positions and sizes of draggable and resizable elements based on the current zoom scale.

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

This approach provides a clean and non-invasive solution for handling drag and resize events within scaled elements using jQuery without modifying any of its core functionality.