[moveable.js] 움직이는 요소 리셋하기 reset

 

특화된 드래그/회전 기능 등을 제공하는 라이브러리임. 화면에 뭔가 드래그&돌아가는걸 구현했어야해서 이걸 캔버스로 해야하나 싶었는데 다행히 라이브러리가 있었다. 참고로 보니까 한국인이신듯?? 아무튼 어떤 요소를 드래그나 회전을 열심히 하다가 reset버튼을 눌렀을 때 원래대로 돌아가게 하고 싶다면 아래와 같이 설정하면 된다.

 

https://daybrush.com/moveable/

Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!

 

1. reset하기

const reset = () => {
  moveable.target.style = ''; // 1
  moveable.updateRect(); // 2
};

여기서 moveable은 new Moveable()어쩌고로 활성화 한 객체를 의미함. 첫번째로 moveable.target은 움직이는 요소인데 인라인으로 적용된 스타일을 해제하면 원래 상태로 돌아감.

 

근데 저렇게만 적용했을 때, 회전할 수 있는 컨트롤 박스는 적용이 안되는걸 볼 수 있는데, 이때 updateRect()를 해주면 움직이는 요소로 다시 붙어서 정상적으로 사용 가능함.

 

 

Reset positions drag and drop in moveable.js