[#11] Draggable Modal 구현

hanbin9775 commented 3 years ago

Draggable Modal 구현을 위해 react-draggable 설치

hanbin9775 commented 3 years ago

Draggable Component 안에 input box가 있으면 선택이 안되는 이슈 발생.

https://github.com/react-grid-layout/react-draggable/issues/314

다행히 나말고도 이런 문제를 겪은 사람이 있어 해당 모듈의 깃헙 이슈로 올라왔었다. 문제는 input box 선택과 드래그 이벤트가 겹쳐서 선택이 안되었던 것. 해결방법 draggable component의 cancle 속성으로 드래그 이벤트 맞물리지 않도록 하는 선택자를 등록.

 <Draggable
   cancel=".not-draggable"
 >
  <input class="not-draggable" />
...

hanbin9775 commented 3 years ago

draggable modal의 현재 height 값을 가져오고 싶다. react-draggable 모듈은 따로 현재 위치를 반환하는 prop을 가지고 있진 않다.

hanbin9775 commented 3 years ago

react draggable element의 css값에 접근해서 height 값을 가져오는 방법으로 구현.

const matrix = window.getComputedStyle(reactDraggable, null).transform;
const parsedMatrix = matrix.substr(7, matrix.length - 8);
const currentY = parseInt(parsedMatrix.split(",")[5].trim(), 10);

getComputedStyle로 transform css 속성을 가져온다. 이 때 transform 값은 string 값으로 return 되기 때문에 원하는 값을 적절하게 parse하는 과정이 필요했다.

hanbin9775 / simple-website

[#11] Draggable Modal 구현 #11