如何使用 CSS 變換比例實現正確的 jQuery 拖曳/調整大小行為？

使用CSS 轉換比例修復jQuery 拖曳/調整大小

背景背景

背景

jQuery 修補解決方案

先前的解決方案涉及修補 jQuery 的可拖曳和可調整大小的插件，以透過比例因子。此方法需要修改插件的原始程式碼。

替代解決方案：回呼處理程序

替代解決方案是使用可調整大小和可拖曳插件提供的回呼處理程序。這樣就無需修補 jQuery。

可調整大小修復

$(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 物件。

可拖曳修復

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