## CSS 변환 배율로 jQuery 드래그/크기 조정 불일치를 해결하는 방법은 무엇입니까?

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>

드래그 가능의 경우:

<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>

이 코드 조각에서 ZoomScale은 변환된 요소의 현재 크기를 나타내는 전역 변수입니다.

이 솔루션 jQuery 플러그인을 사용하여 크기가 조정된 요소 내에서 드래그 및 크기 조정을 처리하는 비침해적 방법을 제공합니다.

위 내용은 ## CSS 변환 배율로 jQuery 드래그/크기 조정 불일치를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!