jQuery Drag/Resize with CSS Transform Scale

This issue arises when applying a CSS transform with scaling to an element and then using jQuery's draggable() and resizable() plugins on children within that element. The problem is that the jQuery-based alterations appear "out of sync" with the mouse movements due to the applied scale.

Original Solution

A patched solution was found on StackOverflow that suggested modifying the jQuery plugin. Specifically, the _mouseStart() and _generatePosition() functions were altered to account for the scaling:

• Monkey-patched _mouseStart() to adjust the offset values by a factor equal to the scale applied.
• In _generatePosition(), the movement was adjusted based on the scale factor to ensure proper alignment of the dragged/resized elements.

Improved Solution

Subsequently, a more elegant solution was discovered that eliminates the need for modifying jQuery. This approach involves setting callback handlers for the resizable and draggable events:

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

By using these callback handlers, the draggable and resizable elements will now function correctly within the scaled element without the need to modify jQuery or implement complex patching solutions.

The above is the detailed content of How to use jQuery\'s draggable() and resizable() plugins with CSS transform scale on child elements?. For more information, please follow other related articles on the PHP Chinese website!