CSS 변환 배율을 사용하여 올바른 jQuery 끌기/크기 조정 동작을 달성하는 방법은 무엇입니까?

CSS 변환 배율로 jQuery 드래그/크기 조정 수정

배경

CSS 변환 적용 요소를 추가한 다음 해당 하위 항목에 jQuery의 드래그 및 크기 조정이 가능한 플러그인을 사용하면 마우스 커서와 드래그되거나 크기가 조정된 요소 사이에 정렬이 잘못될 수 있습니다. 이는 요소에 적용된 배율 인수 때문입니다.

jQuery 패치 솔루션

이전 솔루션에서는 jQuery의 드래그 가능 및 크기 조정 가능 플러그인을 패치하여 마우스 오프셋을 조정했습니다. 스케일 팩터. 이 방법을 사용하려면 플러그인의 소스 코드를 수정해야 합니다.

대체 솔루션: 콜백 핸들러

대체 솔루션은 크기 조정 및 드래그 가능한 플러그인에서 제공하는 콜백 핸들러를 사용하는 것입니다. 이렇게 하면 jQuery를 패치할 필요가 없습니다.

크기 조정 가능한 수정

<br>$(this).ressible({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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;

}