Drag&Drop 구현하기

drag&drop 구현

• DOM 객체를 나타내는 태그에 draggable="true"이라 넣으면 텍스트 처리 되지 않고 움직일 수 있음.

• addEventListener의 이벤트로 drag를 주면 드레그 후 요소의 위치를 받을 수 있음.

$todoList.addEventListener("dragstart", (e) => {
    const $li = e.target.closest("li");
    e.dataTransfer.setData("todoId", $li.dataset.id);
  });

  $todoList.addEventListener("dragover", (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
  });

  $todoList.addEventListener("drop", (e) => {
    e.preventDefault();
    const droppedTodoId = e.dataTransfer.getData("todoId");

    //현재 todolist의 todo가 아닌 경우 상위컴포넌트에 알림
    const { todos } = this.state;
    if (!todos.find((todo) => todo._id === droppedTodoId)) {
      onDrop(droppedTodoId);
    }
  });

기본 동작

• drag를 시작하는 지점에서 dataTransfer라는 객체를 통해 drop할 곳에 어떤 데이터를 보낼지 정의함.

• drop 받은 곳은 drag시작했을 때 dataTransfer에서 정의된 데이터를 꺼내와 어떤게 drop됐는지 판단하여 사용함.

• App.js에서 onDrop 함수를 생성해 drop 시 request의 options로 PUT을 지정하여 fetchTodos함.

추가 작업

로딩처리

• 로딩중 아이콘과 동시에 화면 block하기.

• 낙관적 업데이트도 방법임. 다만 이 경우, 여러 호출이 동시에 될 경우 UI가 밀릴 수 있음.

//id 찾는 방법
const nextTodos = [...this.state.todos];
      const todoIndex = nextTodos.findIndex((todo) => todo._id === todoId);
      nextTodos[todoIndex].isCompleted = false;

불필요한 호출 줄이기

• 아래로 이동했다 다시 위로 이동하는 경우

• 아래로 이동한 후 삭제한 경우

• 호텔 에약 같은 곳에서 자주 활용됨.

공부해야 할 키워드