jQuery 使用CSS 轉換縮放拖曳/調整大小

問題： 當應用CSS 轉換時，特別是變換：矩陣(0.5, 0, 0, 0.5, 0, 0);，對於一個div 並在子元素上使用jQuery 的draggable() 和resizing() 插件，jQuery 所做的更改變得與滑鼠位置「不同步”。

解決方案：修補 jQuery 外掛

透過修補 jQuery 外掛程式找到了解決方案，特別是 $.ui.draggable 的 _mouseStart 和 _generatePosition 方法。這種方法有效，但需要修改原始插件程式碼。

替代解決方案：使用回呼處理程序

但是，發現了一個更優化的解決方案，不需要修改直接使用 jQuery 插件。透過利用回調處理程序，可以根據目前縮放比例調整可拖曳和可調整大小元素的位置和大小。

可調整大小的變換比例修復：

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

可拖曳的變換比例修復：

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

此方法提供了一個乾淨且非侵入性的解決方案，用於使用 jQuery 處理縮放元素中的拖曳和調整大小事件，而無需修改其任何核心功能。