How to Fix jQuery Drag/Resize Issues with CSS Transform Scale?

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.

The above is the detailed content of How to Fix jQuery Drag/Resize Issues with CSS Transform Scale?. For more information, please follow other related articles on the PHP Chinese website!