如何使用 CSS 變換比例修復 jQuery 拖曳/調整大小問題？

使用CSS 轉換比例進行jQuery 拖曳/調整大小

問題：應用SS 轉換時，具體變換：矩陣(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 處理縮放元素中的拖曳和調整大小事件，而無需修改其任何內容核心功能。

以上是如何使用 CSS 變換比例修復 jQuery 拖曳/調整大小問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！