## 如何解决 jQuery 拖动/调整 CSS 缩放比例差异？

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

问题：

应用 CSS 变换 (包括矩阵缩放）到元素会导致使用 jQuery 的draggable() 和 resizing() 插件执行的拖动和调整大小操作出现差异。

解决方案：

用户提出了一个补丁修改了 jQuery 插件，但此解决方案需要编辑插件文件。

替代方法：

或者，您可以通过在可拖动的回调处理程序中避免修补 jQuery和可调整大小的配置。此方法会根据这些事件期间的缩放比例来调整新的尺寸和位置。

代码：

对于可调整大小：

<code class="js">$(this).resizable({
  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;
  }
});</code>

对于 Draggable：

<code class="js">$(this).draggable({
  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;
  }
});</code>

在这些代码片段中，zoomScale 是一个全局变量，表示转换后元素的当前比例。

此解决方案提供了一种非侵入式方法来使用 jQuery 插件处理缩放元素中的拖动和调整大小。

以上是## 如何解决 jQuery 拖动/调整 CSS 缩放比例差异？的详细内容。更多信息请关注PHP中文网其他相关文章！