하위 요소의 CSS 변환 배율과 함께 jQuery의 draggable() 및 resizing() 플러그인을 사용하는 방법은 무엇입니까?

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

이 문제는 요소에 크기 조정이 포함된 CSS 변환을 적용한 다음 jQuery의 드래그 가능 기능을 사용할 때 발생합니다. () 및 resizing() 플러그인은 해당 요소 내의 하위 항목에 적용됩니다. 문제는 jQuery 기반 변경 사항이 적용된 배율로 인해 마우스 움직임과 "동기화되지 않은" 것처럼 보인다는 것입니다.

원래 솔루션

패치된 솔루션이 발견되었습니다. StackOverflow에서 jQuery 플러그인 수정을 제안했습니다. 특히 _mouseStart() 및 _generatePosition() 함수는 스케일링을 고려하여 변경되었습니다.

• Monkey 패치 _mouseStart()는 적용된 스케일과 동일한 요소로 오프셋 값을 조정합니다.
• _generatePosition()에서는 드래그/크기 조정된 요소가 올바르게 정렬되도록 배율 인수를 기반으로 이동이 조정되었습니다.

향상된 솔루션

나중에 jQuery를 수정할 필요가 없는 더욱 우아한 솔루션이 발견되었습니다. 이 접근 방식에는 크기 조정 가능 및 드래그 가능 이벤트에 대한 콜백 핸들러 설정이 포함됩니다.

크기 조정 가능:

$(this).resizable({
    // Set very large and negative minWidth and minHeight
    minWidth: -(contentElem.width()) * 10,
    minHeight: -(contentElem.height()) * 10, 
    resize: function(event, ui) {
        // Calculate the change in width and height
        var changeWidth = ui.size.width - ui.originalSize.width;
        var changeHeight = ui.size.height - ui.originalSize.height;

        // Adjust the new width and height by dividing the change by the zoomScale
        var newWidth = ui.originalSize.width + changeWidth / zoomScale;
        var newHeight = ui.originalSize.height + changeHeight / zoomScale;

        // Update the ui.size object with the adjusted values
        ui.size.width = newWidth;
        ui.size.height = newHeight;
    }
});

드래그 가능:

$(this).draggable({
    handle: '.drag-handle', // Specify a handle element for dragging
    start: function(event, ui) {
        // Reset the ui.position object to {left: 0, top: 0} at the start of the drag
        ui.position.left = 0;
        ui.position.top = 0;
    },
    drag: function(event, ui) {
        // Calculate the change in left and top positions
        var changeLeft = ui.position.left - ui.originalPosition.left;
        var changeTop = ui.position.top - ui.originalPosition.top;

        // Adjust the new left and top positions by dividing the change by the zoomScale
        var newLeft = ui.originalPosition.left + changeLeft / zoomScale;
        var newTop = ui.originalPosition.top + changeTop / zoomScale;

        // Update the ui.position object with the adjusted values
        ui.position.left = newLeft;
        ui.position.top = newTop;
    }
});

이러한 콜백 핸들러를 사용하면 드래그 및 크기 조정 가능한 요소가 이제 jQuery를 수정하거나 복잡한 패치 솔루션을 구현할 필요 없이 크기가 조정된 요소 내에서 올바르게 작동합니다.

위 내용은 하위 요소의 CSS 변환 배율과 함께 jQuery의 draggable() 및 resizing() 플러그인을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!