.interact() / interact.js / 드래그, 드롭, 리사이즈, 제스처 제어

 

 

순수 자바스크립트(JS) 라이브러리

 

원래 목적: 브라우저에서 DOM 요소를 드래그, 드롭, 리사이즈, 제스처 등 제어할 수 있게 해주는 범용 라이브러리

 

<div class="draggable">
  <div class="card">이 부분은 드래그 안 됨</div>
</div>

interact(".draggable").draggable({
  ignoreFrom: ".no-drag",
  startAxis: "x",
  listeners: {
    move(event) {
      const target = event.target;
      target.style.transform = `translate(${event.dx}px, ${event.dy}px)`;
    }
  }
});

• .no-drag 영역 클릭 시 드래그 안 됨
• 드래그 시작은 가로(x) 이동만 허용
• 드래그 중 dx/dy를 이용해 이동

 

 

startAxis: "y"

• 드래그가 시작되는 **주 축(axis)**을 제한
• "y" → 드래그 시작 시 세로 이동만 허용
• "x" → 가로 이동만 허용
• 지정 안 하면 자유롭게 x/y 방향 모두 이동 가능