使用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中文網其他相關文章！
