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