JavaScript에서 변환 및 크기 조정을 사용하여 올바른 드래그 위치 계산

JavaScript로 드래그 앤 스케일링 중 요소 위치 처리

이 솔루션은 드래그 앤 드롭 처리를 위해 순수한 JavaScript를 활용하고, 변환 및 변환 속성을 사용하여 요소의 크기를 조정하면서 위치를 계산합니다.

let startX, startY, initialX, initialY, scale = 1;
const draggable = document.getElementById('draggable');
draggable.addEventListener('pointerdown', startDrag);

function startDrag(e) {
  startX = e.clientX;
  startY = e.clientY;
  const rect = draggable.getBoundingClientRect();
  initialX = rect.left;
  initialY = rect.top;
  document.addEventListener('pointermove', dragElement);
  document.addEventListener('pointerup', stopDrag);
}

function dragElement(e) {
  const deltaX = (e.clientX - startX) / scale;
  const deltaY = (e.clientY - startY) / scale;
  draggable.style.transform = `translate(${initialX + deltaX}px, ${initialY + deltaY}px) scale(${scale})`;
}

function stopDrag() {
  document.removeEventListener('pointermove', dragElement);
  document.removeEventListener('pointerup', stopDrag);
}

요소 크기 조정을 위해 CSS 및 JavaScript를 사용하는 대체 솔루션

이 대체 접근 방식은 JavaScript와 결합된 CSS 변수를 사용하여 크기가 조정될 때 요소의 위치를 ​​동적으로 조정합니다.

let startX, startY, initialX, initialY, scale = 1;
const draggable = document.getElementById('draggable');
draggable.addEventListener('pointerdown', startDrag);

function startDrag(e) {
  startX = e.clientX;
  startY = e.clientY;
  const rect = draggable.getBoundingClientRect();
  initialX = rect.left / scale;
  initialY = rect.top / scale;
  document.addEventListener('pointermove', dragElement);
  document.addEventListener('pointerup', stopDrag);
}

function dragElement(e) {
  const deltaX = (e.clientX - startX) / scale;
  const deltaY = (e.clientY - startY) / scale;
  draggable.style.setProperty('--x', initialX + deltaX + 'px');
  draggable.style.setProperty('--y', initialY + deltaY + 'px');
}

function stopDrag() {
  document.removeEventListener('pointermove', dragElement);
  document.removeEventListener('pointerup', stopDrag);
}

드래그 앤 스케일 기능 검증을 위한 단위 테스트

이 섹션에서는 끌어서 놓기 기능이 크기 조정된 요소에서 올바르게 작동하는지 확인하기 위해 JavaScript를 사용하는 단위 테스트를 제공합니다.

function testDragWithScale() {
  const element = document.createElement('div');
  element.style.width = '100px';
  element.style.height = '100px';
  element.style.transform = 'scale(2)';
  document.body.appendChild(element);
  startDrag({clientX: 100, clientY: 100});
  dragElement({clientX: 200, clientY: 200});
  const computedTransform = getComputedStyle(element).transform;
  console.assert(computedTransform.includes('translate(50px, 50px)'), 'Position adjusted correctly with scale');
}

testDragWithScale();

크기 조정 및 드래그 앤 드롭에 대한 일반적인 질문

1. 크기 조정은 드래그 앤 드롭 위치 지정에 어떤 영향을 미치나요?
2. 스케일링은 요소의 크기를 변경하므로 적절한 위치를 유지하려면 변환을 스케일 인수로 나누어 이동을 조정해야 합니다. 이렇게 하면 요소가 커서와 함께 올바르게 이동합니다.
3. 어떤 역할을 하는지 getBoundingClientRect() 이것으로 놀아?
4. getBoundingClientRect() 뷰포트를 기준으로 요소의 현재 크기와 위치를 제공하여 정확한 이동과 오프셋을 계산하는 데 도움을 줍니다.
5. 요소를 드래그할 때 다양한 배율 값을 어떻게 설명할 수 있나요?
6. 이동 거리를 배율로 나누면 요소의 이동이 크기에 비례하여 유지되도록 할 수 있습니다. 당신은 또한 사용할 수 있습니다 setProperty() 스케일 값에 따라 CSS 변수를 동적으로 업데이트합니다.
7. 다른 요소에 이 기능을 재사용할 수 있나요?
8. 예, 모듈식 코드를 작성하고 재사용 가능한 함수에 드래그 앤 드롭 논리를 캡슐화하면 크기나 변환 속성에 관계없이 여러 요소에 동일한 기능을 적용할 수 있습니다.
9. 왜 사용해야합니까? removeEventListener() 끝을 드래그한 후?
10. 사용 removeEventListener() 메모리 누수를 방지하고 사용자가 요소를 놓을 때 드래그 동작이 중지되도록 합니다. 이렇게 하면 성능이 향상되고 이벤트 리스너가 불필요하게 활성화되지 않습니다.

스케일링을 통한 드래그 관리에 대한 최종 생각

드래그 가능한 요소의 크기가 조정되는 프로젝트에서는 올바른 위치를 계산하는 것이 복잡해집니다. 스케일과 초기 위치를 모두 조정하려면 이동 좌표를 스케일 계수로 나누어 정확한 움직임을 보장해야 합니다.

좌표 조정 및 경계 사각형 계산 사용과 같은 동적 방법을 통합하면 원활한 드래그 앤 드롭 환경을 얻을 수 있습니다. 다양한 척도 값에 이 접근 방식을 적용하면 원활한 상호 작용을 유지하고 사용자 인터페이스 일관성이 향상됩니다.