일정 옮기기
사용배경
구글 캘린더에 기능 중 일정 만들기를 구현하였다. 기능은 다음과 같다.
1. 일정을 움직일 수 있다. 단위는 15분이다.
=> 2시 0분, 2시 15분, 2시 30분, 2시 45분 등등 15분 단위만 가능!!!
2. 일정을 움직이면 시간도 알맞게 변경이 된다.
3. 일정이 겹칠 때에는 어떠한 알고리즘으로 일정크기가 변경된다.
=> 이 부분은 잘 모르겠다...
구글처럼 겹치는 부분을 알고리즘으로 조절하는 것이 아닌 사용자가 직접 움직이는 것으로 구현하였다. 또한 본 프로젝트에선 너비를 100으로 통일 시켰다.
구현
1. offsetX, offsetY가 아닌 clientX, clientY를 사용하여 좌표 delta값을 계산하기
이 부분을 가장 고민했던 부분이다.
앞서 설명한 offsetX, Y를 사용하면 쉽게 해결할 수 있다고 생각했다. 하지만 offsetX는 이벤트가 발생한 대상 기준이다. 즉 이 부분에서 이벤트가 발생한 대상 기준은 일정표가 아닌 일정 이다.
위에 이미지를 보게 되면 클릭 좌표가 일정표 기준으로 계산하여 (100, 180)이 나와야 하는데 일정 기준으로 계산하여 (8,2)이런식으로 나왔다.
일정을 클릭하여도 부모 요소인 일정표의 offsetX, offsetY값을 알고 싶었지만 아무리 찾아도 없었다.(아시는 분은 댓글 달아주세요 ㅠㅠ)
그래서 clientX, clientY값을 이용하기로 하였다.
그러면 스크롤은 어떻게 계산해야 하나??
=> 처음엔 e.target.scrollTop으로 가져오려고 했다. 하지만 이것도 스크롤이 있는 이벤트 객체(일정표)에서만 가져오고 일정에서는 0을 가져온다.
해결법은 top을 가져와서 top에 delta값을 더해주면 된다.!!!
코드로 살펴보자
해당 함수는 처음 드래그를 시작했을 때 onMouseDown이벤트이다.
startX, startY에는 처음 클릭했을 때의 좌표값이 저장된다.
마찬가지로 currentleft, currenttop에 움직이기전 left와 top을 저장한다.
해당 함수는 드래그 중을 나타내는 onMouseMove 이벤트이다.
처음 클릭했을 때 좌표값을 따로 저장한 걸로 인해 deltaX, deltaY값을 구할 수가 있다.
따라서 기존에 있던 좌표값에 delta값들을 더하면 움직인 좌표값을 알 수 있다.
여기서도 마찬가지로 15분 단위로 움직여야 하기 때문에 25로 나눈 것을 볼 수 있다.
(cnt란 => 15분 단위는 25px이고 15분 기준으로 나눈 갯수)
이 부분은 일정표 밖으로 나갈 경우 매끄럽게 작동하기 위해서 추가한 로직이다.
end시간을 아는 방법은 간단한다. 현재 div의 top에서 height만큼 더한 값이 end 부분 높이가 되고 이것을 25로 나누면 cnt값을 구할 수가 있다.
드래그 끝을 나타내는 onMouseOn 이벤트이다. 이벤트 리스너를 끄고 해당 변수들을 초기화 해준다.
결과
발생한 문제
일정 div를 움직이려고 드래그를 하다보면 가끔씩 not-allowed커서가 작동하였다. 그래서 움직이지도 않고 이벤트도 제대로 실행되지 않았다. 이러한 문제에 대해서 찾아보았으나 적당한 해결법을 찾지 못하였다.
혹시나 하는 마음에 onMouseDown 이벤트에
를 추가하니 not Allowed가 발생하지 않았다.
내가 아는 preventDefault()는 태그의 동작을 막아주는 역할을 한다고 알고 있었다. 삽질을 통해 해결을 했으나 뭔가 제대로 이해하고 해결했다고는 못할 것 같다.
