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;

}

로그인 후 복사

});

크기 조정 핸들러에서 너비와 높이의 변화를 계산하고 확대/축소 배율의 역수를 적용하여 새 너비와 높이를 조정하고 그에 따라 ui.size 개체.

Draggable Fix

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

}

로그인 후 복사