인프런 커뮤니티 질문&답변

duswlskfk42님 안녕하세요.

먼저, dragOver에서 말하는 타겟이란, 드래그-오버 되고 있는 대상을 의미하는데요. 이 이벤트는 이벤트 리스너가 달려있는 블록에서 드래그가 이루어지면 발생합니다. (현재 각각 todo, doing, done 리스트 블록)

또한 listIds는 애초 리스트의 이름 (아이디)를 뽑아내기 위해 Object.keys를 사용해 가져오는 것이므로, todo, doing, done만 나오는 것이 맞습니다.

결론적으로, 할 일을 드래그 해서, listIds 값 중 하나와 동일한 아이디를 가진 블록 위로 드래그 한다면, to에 해당 리스트의 아이디 값을 대입해 도착지를 그곳으로 설정하게 되고, 드래그가 끝난 시점에 출발지와 도착지가 다른 경우에만 dragEnd 함수의 동작을 통해 요소가 이동 (실제로는 출발지에서 삭제 후 도착지에서 새롭게 생성)하게 됩니다.

즉, 올바르게 블록 단위로 드래그 되어 타겟 아이디가 리스트 블록의 아이디 중 하나를 갖지 않는다면, uuid는 당연히 listIds에 없기 때문에 이동하지 않습니다. 그래서 반드시 다른 블록 (이벤트 리스너가 달려 있는 리스트 블록) 안에 놓아야만 이동하는 것으로 구현이 됩니다.

다음 코드를 테스트 해보시면 좋을 것 같습니다.

const dragOver = (event) => {
  event.preventDefault();

  const { id: targetId } = event.target;
  const listIds = Object.keys(lists);

  console.log(event.currentTarget.id);

  if (listIds.includes(targetId)) {
    to = targetId;
  }
};

만약 왜 내부 할 일 항목에서도 이벤트가 발생하는 것처럼 보이는지 이 부분을 더 자세히 알고 싶으시다면, 자바스크립트의 이벤트 전파 방식 부분, Event Target과 Current Target의 차이점 등을 함께 공부하시면 도움이 될 것 같습니다.