## 如何解決 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>

對於Dr

<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>

對於Dr

對於Draggable：

在這些程式碼片段中，zoomScale 是一個全域變量，表示轉換後元素的當前比例。 此解決方案提供了一種非侵入式方法來使用 jQuery 外掛程式處理縮放元素中的拖曳和調整大小。

以上是## 如何解決 jQuery 拖曳/調整 CSS 縮放比例差異？的詳細內容。更多資訊請關注PHP中文網其他相關文章！