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

문제: 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를 사용하여 크기가 조정된 요소 내에서 드래그 및 크기 조정 이벤트를 처리하기 위한 깔끔하고 비침습적인 솔루션을 제공합니다.