如何使用 CSS 变换比例修复 jQuery 拖动/调整大小问题？

使用 CSS 变换比例进行 jQuery 拖动/调整大小

问题：应用 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 处理缩放元素中的拖动和调整大小事件，而无需修改其任何内容核心功能。

以上是如何使用 CSS 变换比例修复 jQuery 拖动/调整大小问题？的详细内容。更多信息请关注PHP中文网其他相关文章！