jQuery 드래그/크기 조정이 CSS Transform Scale과 함께 작동하도록 만드는 방법은 무엇입니까?

CSS 변환 배율을 사용한 jQuery 드래그/크기 조정

이 질문은 CSS 변환이 있는 div 내의 하위 요소에 jQuery 드래그 가능 및 크기 조정 가능 플러그인을 적용하는 문제에 관한 것입니다. (행렬)이 적용되었습니다. 문제는 자식 요소를 드래그하거나 크기를 조정할 때 발생합니다. jQuery에서 조정한 내용이 적용된 배율에 해당하는 요소에 의해 마우스 위치와 동기화되지 않기 때문입니다.

해결책

이후 몇 가지 실험을 통해 사용자는 jQuery의 드래그 가능하고 크기 조정 가능한 플러그인을 패치하는 것과 관련된 솔루션을 찾았습니다. 패치된 코드의 요약은 다음과 같습니다.

• Monkey Patching mouseStart(): 이 패치는 마우스 오프셋을 기반으로 마우스 오프셋을 조정하여 도우미 요소의 위치가 올바르게 계산되도록 보장합니다. 요소의 변환 배율.
• getViewOffset(): 이 함수는 적용된 변환에서 요소의 오프셋을 올바르게 계산하는 데 도움이 됩니다.

jQuery 드래그/크기 조정 패치

다음 코드는 jQuery UI의 드래그 가능한 플러그인에서 mouseStart() 및 generatePosition() 함수에 대한 수정을 보여줍니다.

function monkeyPatch_mouseStart() {

  // Monkey patch mouseStart function

  $.ui.draggable.prototype._mouseStart = function(event) {
    
    // Calculate adjusted offset
    this.offset = this.positionAbs = getViewOffset(this.element[0]);
  }

}

function generatePosition(event) {

  // Calculate adjusted position
  this.top = (
    pageY                               // Absolute mouse position
    - this.offset.click.top                         // Click offset
    - this.offset.relative.top                        // Element's initial position
    + ($.browser.safari &amp;&amp; $.browser.version < 526 &amp;&amp; this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( this.scrollParent.scrollTop() ) ))
  );

  this.left = (
    pageX                                // Absolute mouse position
    - this.offset.click.left                        // Click offset
    - this.offset.relative.left                       // Element's initial position
    + ($.browser.safari &amp;&amp; $.browser.version < 526 &amp;&amp; this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : this.scrollParent.scrollLeft() ))
  );
}

jQuery의 대안

드래그 및 크기 조정 기능을 처리하기 위한 jQuery의 대안으로 고려해야 할 몇 가지 옵션은 다음과 같습니다.

• 바닐라 JavaScript: 기본 JavaScript 이벤트를 사용하여 드래그 앤 드롭 기능을 구현할 수 있습니다.
• React.js: React는 이러한 상호작용을 관리하기 위해 useDrag 및 useResize와 같은 후크 세트를 제공합니다.
• Vue.js: Vuex는 드래그를 지원합니다. useDrag() 후크를 통한 드롭 앤 드롭 상호 작용.

추가 개선

사용자는 jQuery 플러그인 내의 콜백 핸들러와 관련된 솔루션도 제공합니다. 이 방법은 플러그인 코드 패치가 필요하지 않으며 드래그 및 크기 조정 작업 중에 배율 인수를 활용하여 너비, 높이 및 위치를 조정합니다.

// Resizable callback handler
$(this).resizable({
    ...
    resize: function(event, ui) {
        // Adjust width and height relative to scale
        ui.size.width = ui.originalSize.width + (ui.size.width - ui.originalSize.width) / zoomScale;
        ui.size.height = ui.originalSize.height + (ui.size.height - ui.originalSize.height) / zoomScale;
    }
});

// Draggable callback handler
$(this).draggable({
    ...
    drag: function(event, ui) {
        // Adjust position relative to scale
        ui.position.left = ui.originalPosition.left + (ui.position.left - ui.originalPosition.left) / zoomScale;
        ui.position.top = ui.originalPosition.top + (ui.position.top - ui.originalPosition.top) / zoomScale;
    }
});

이 대체 방법은 드래그 및 크기 조정 이벤트를 관리하기 위한 편리한 솔루션입니다. jQuery 플러그인 자체를 수정하지 않고 변형 스케일이 적용된 요소에서.

위 내용은 jQuery 드래그/크기 조정이 CSS Transform Scale과 함께 작동하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!