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

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

문제: CSS 변환을 적용할 때 특히 변환: 행렬 (0.5, 0, 0, 0.5, 0, 0);을 div에 추가하고 하위 요소에 jQuery의 draggable() 및 resizing() 플러그인을 사용하면 jQuery에 의한 변경 사항이 마우스 위치와 "동기화되지 않습니다".

해결책: jQuery 플러그인 패치

jQuery 플러그인, 특히 $.ui.draggable의 _mouseStart 및 _generatePosition 메서드를 패치하여 해결책을 찾았습니다. 이 접근 방식은 효과적으로 작동했지만 원래 플러그인 코드를 수정해야 했습니다.

대체 솔루션: 콜백 핸들러 사용

그러나 플러그인 수정이 필요하지 않은 보다 최적의 솔루션이 발견되었습니다. jQuery 플러그인을 직접 사용합니다. 콜백 핸들러를 활용하면 현재 확대/축소 배율을 기준으로 드래그 및 크기 조정이 가능한 요소의 위치와 크기를 조정할 수 있습니다.

크기 조정이 가능한 변환 배율 수정:

$(this).resizable({
    minWidth: -(contentElem.width()) * 10, 
    minHeight: -(contentElem.height()) * 10, 
    resize: function(event, ui) {
        // Adjust width and height based on zoom scale
        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;
    }
});

드래그 가능을 위한 변환 스케일 수정:

$(this).draggable({
    handle: '.drag-handle', 
    start: function(event, ui) {
        ui.position.left = 0;
        ui.position.top = 0;
    }, 
    drag: function(event, ui) {
        // Adjust left and top positions based on zoom scale
        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;
    }
});

이 접근 방식은 jQuery를 사용하여 스케일링된 요소 내에서 드래그 및 크기 조정 이벤트를 처리하기 위한 깔끔하고 비침습적인 솔루션을 제공합니다. 핵심 기능.

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