如何使用 CSS 变换比例实现正确的 jQuery 拖动/调整大小行为？

使用 CSS 变换比例修复 jQuery 拖动/调整大小

背景

将 CSS 变换应用于一个元素，然后在其子元素上使用 jQuery 的可拖动和可调整大小的插件，可能会导致鼠标光标与拖动或调整大小的元素之间不对齐。这是由于应用于元素的比例因子造成的。

jQuery 修补解决方案

之前的解决方案涉及修补 jQuery 的可拖动和可调整大小的插件，以通过比例因子。此方法需要修改插件的源代码。

替代解决方案：回调处理程序

替代解决方案是使用可调整大小和可拖动插件提供的回调处理程序。这样就无需修补 jQuery。

可调整大小修复

<br>$(this).ressized({<pre class="brush:php;toolbar:false">minWidth: -(contentElem.width()) * 10,  
minHeight: -(contentElem.height()) * 10,  
resize: function(event, ui) {

    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;

}

});

在调整大小处理程序中，计算宽度和高度的变化，应用缩放比例的倒数来调整新的宽度和高度，并更新相应地调整 ui.size 对象。

可拖动修复

<br>$(this).draggable({<pre class="brush:php;toolbar:false">handle: '.drag-handle',
start: function(event, ui) {
    ui.position.left = 0;
    ui.position.top = 0;
},
drag: function(event, ui) {

    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;

}

});

在拖动处理程序中，计算左侧和顶部位置的变化，应用缩放比例的倒数来调整新的左侧和顶部位置，并更新

结论

这种使用回调处理程序的替代解决方案提供了一种非侵入性的方法来纠正 CSS 缩放时的拖动/调整大小行为已申请。

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