250313 to-do 리스트 만들기 (2)

 

https://hydeveloper.tistory.com/170 에서 아직 하지 못한 심화 과제 (3) : 드래그 앤 드롭으로 요소의 위치 바꾸기 (정렬하기) 를 구현하고자 한다.

 

 

이에 앞서 draggable 속성과 drag 이벤트를 알아둬야 한다.

 

draggable 속성

 

draggable = "true"를 부여하면 어떤 요소든 드래그될 수 있는 객체로 변환할 수 있다.

 

draggable 속성이 없을 때 / draggable = "true"가 있을 때

 

 

drag 이벤트

 

(mdn : https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/drag_event)

 

drag	드래그가 가능한 대상에서 발생
dragstart	드래그를 시작할 때 발생
dragend	드래그가 종료될 때 발생
dragover	드래그하면서 마우스가 대상 객체 위에 있을 때 발생
dragenter	드래그하면서 마우스가 대상 객체 위로 처음 진입할 때 발생 (1회)
dragleave	드래그하면서 마우스가 대상 객체 위에서 벗어날 때 발생
drop	드래그한 요소가 대상 객체 위에 놓여있을 때 발생

 

 

자세한 실습 예제는 아래 사이트들을 추천한다. 

https://ko.javascript.info/mouse-drag-and-drop 

https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5

 

 

 

드래그 앤 드롭 준비

 

 

우선 li에게 draggable = true 속성을 추가해준다. (그래야 드래그 앤 드롭이 가능함)

  li.setAttribute("draggable", true);
  // 리스트에 넣기 전에 추가하기
  todoList.append(li);

 

 

그리고 항목을 드래그하는 느낌을 주기 위해 스타일을 조금 더 추가했다.

#todo-list li {
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  /* 추가 */
  border-radius: 10px;
  background-color: #fff;
}

 

 

css 적용 전 / 후

 

 

 

 

드래그 앤 드롭으로 리스트 정렬

 

 

드래그 앤 드롭으로 리스트를 정렬하기 위해서는

1) 현재 드래그하고 있는 요소의 인덱스,

2) 현재 드래그가 over된 위치(그래야 그 위치로 이동할 수 있기 때문)

가 필요하다.

 

 

* 인덱스 구하기

 

인덱스를 구하는 함수는 Array.prototype.indexOf()으로 구하는데, 이때 prototype 부분은 배열이 아닌 객체에서 인덱스를 구하고자 할 때의 객체를 넣으면 된다.

Array.from은 순회 가능 또는 유사 배열 객체에서 얕게 복사된 새로운 Array 인스턴스를 생성한다. 즉 element의 부모요소의 자식들을 유사 배열 객체로 취급하고, 이 중 element의 인덱스를 구하는 것이다.

const index = Array.from(element.parentNode.children).indexOf(element)

 

이를 이용해 드래그된 요소, 드롭될 요소(의 위치)를 구할 수 있다.

 

 

1) 드래그 시작

 

// liDrag : 현재 드래그 하고 있는 요소를 담은 변수
let liDrag;
let dragIndex;

// 드래그 시작했을 때
li.addEventListener("dragstart", function(e) {
	// 타겟의 태그가 li가 아니라면
    if (e.target.tagName.toLowerCase() !== 'li') {
      liDrag = e.currentTarget; // 상위 <li> 요소로 선택
    } else {
      liDrag = e.target;
    }
    // # 방법 1
    dragIndex = Array.from(liDrag.parentNode.children).indexOf(liDrag);

    // # 방법 2
    // 펼침연산자 ... : 배열에 포함된 항목들을 목록으로 바꿔준다.
    // const listArr의 경우 currentItem.parentElement의 자식인 children목록들을 []에 담아 배열 객체를 가지게 된다.
    // const listArr = [...liDrag.parentElement.children];
    // let liDragIndx = listArr.indexOf(liDrag);
})

 

dragstart 이벤트가 일어났을 때,

타겟을 liDrag에 담고

부모요소에서 해당 타겟이 몇번째인지 인덱스를 찾아내 그 인덱스를 다른 변수에 담는 이벤트 핸들러이다.

 

태그의 타겟이 li가 아닐 때 (일단 추가되어있는 변수 li(할 일 목록을 담고있는 li태그 맞음)로 만든 이벤트 핸들러이기 때문에 그 상위요소는 괜찮다.

문제는 li에 추가되어있는 체크박스(Input), 할일 내용을 출력(span), 삭제버튼... 하위요소가 선택될 수도 있기 때문에, 그 경우에는 currentTarget 속성을 사용해 바로 상위요소인 li를 선택하도록 해준다.

 

 

2) 드래그 되는 도중

 

그 와중 드래그 하는 동안에 계속 dragover가 되어있기 때문에 (ul태그 안에서 계속 dragover 하기 때문) dragover일 시 계속 새로고침을 방지하기 위해 e.preventDefault)를 추가한다.

  todoList.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

 

 

3) 드롭했을 때

 

마지막 drop시 이벤트다...

  todoList.addEventListener("drop", (e) => {
    e.preventDefault();
    let liDrop;
    // 상위 요소에 놓을 경우
    if (e.target.tagName.toLowerCase() == 'li') {
      liDrop = e.target; 
    } else {
      return;
    }

    const dropIndex = Array.from(liDrop.parentNode.children).indexOf(liDrop);

    // after() : 선택한 요소의 바로 뒤에 새 요소 추가
    // before() : 선택한 요소의 바로 앞에 새 요소 추가
    if (dragIndex < dropIndex) {
      liDrop.after(liDrag);
    } else {
      liDrop.before(liDrag);
    }

 

일단 drop 시 새로고침 되는 현상을 막기 위해 e.preventDefault();를 추가했고

변수 liDrag는 드래그 한 변수를 Drop해야 하므로 이벤트 핸들러에서만이 아닌 makeToDoList 함수 전체에서 다 쓸 수 있는 지역변수로 설정해놨다.

반면 liDrop의 경우에는 드롭되는 타겟 (위치)을 의미하기 때문에 drop 이벤트에서만 사용해도 된다. 때문에 해당 이벤트 핸들러 안에서 선언했다.

 

dragstart 이벤트가 일어났을 때처럼 처음에 if문이 보이는데 내용은 딴판이다.

drop시에 li태그들끼리만 순서를 변경하고 싶기 때문에, if문으로 target의 태그가 li일때만 liDrop에 타겟을 대입하도록 수정했다. 아닌 경우는 return으로 아예 해당 이벤트를 중지시킨다. dropIndex는 dragIndex를 구하는 과정과 같다.

 

마지막은 정렬이다.

dragIndex가 dropIndex보다 작으면 after()메소드로 liDrag의 뒤 요소로 liDrop을 추가한다. 반대의 경우에는 before()를 이용해 liDrag의 이전, 즉 앞에 liDrop을 추가한다.

 

 

 

 

해결되지 않았던 부분

if문은 만약 drag한 요소가 ul(상위요소)일 경우, 아니면 하위요소에 놓을 경우, 그 외로 구분지었는데 여기서 뭔가 잘못된 것 같긴하다.. (문제점은 아래에 적어놨다.)

부모요소를 선택했을 때 e.target == liDrag.parentElement 등으로도 선택해봤는데 콘솔창에서 계속 선택이 안되는걸 보아하니 이부분은 문제가 되지 않는 듯 하다.

 

문제는 else if문으로 e.target의 태그네임이 li가 아닌경우 (하위요소 안으로 들어가는 경우가 있어 이를 방지하기 위함임) 구글링해서 드래그는 이 문제를 해결했었는데 아무래도 li태그가 아닌 todoList(ul태그부분)이 선택될 때 ul의 상위태그인 todoContainer가 선택돼 거기로 빠져나가는 것 같다...

 

어디가.......

 

새벽에 머리가 터지는 줄 알았는데 점심든든하게먹고 커피마시면서 불현듯이 그럼 li빼고 막아버리면 안되냐는 생각이 떠올라 해결되었다...

 

 

드래그앤 드롭 부분 전체 코드

  // ･ﾟ*｡･ ｡*･ﾟ 드래그 이벤트 ･ﾟ*｡･ ｡*･ﾟ
  let liDrag;
  let dragIndex;

  // 드래그 시작했을 때
  todoList.addEventListener('dragstart', function (e) {
    // 만약 타겟이 li태그가 아니라면?
    if (e.target.tagName.toLowerCase() !== 'li') {
      liDrag = e.currentTarget; // 상위 <li> 요소로 선택
    } else {
      liDrag = e.target;
    }
    // 왜 4번씩 출력되는건가...
    // console.log(liDrag.parentNode);
    dragIndex = Array.from(liDrag.parentNode.children).indexOf(liDrag);
  });

  // drop 이벤트를 사용하기 위해서 필요함
  todoList.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

  todoList.addEventListener('drop', (e) => {
    e.preventDefault();
    e.stopPropagation();
    // 타겟이 되는 요소가 이닌 경우를 방지하기 위해 만일 부모 요소에 drop 되는 경우 탈출한다.

    let liDrop;
    if (e.target.tagName.toLowerCase() == 'li') {
      liDrop = e.target; 
    } else {
      return;
    }
    const dropIndex = Array.from(liDrop.parentNode.children).indexOf(liDrop);

    // after() : 선택한 요소의 바로 뒤에 새 요소 추가
    // before() : 선택한 요소의 바로 앞에 새 요소 추가
    if (dragIndex < dropIndex) {
      liDrop.after(liDrag);
    } else if (dragIndex > dropIndex){
      liDrop.before(liDrag);
    } else {
      return;
    }
  });

 

완성본.. : https://stackblitz.com/edit/vitejs-vite-5bbnvx8a?embed=1&file=script.js

JavaScript 5일차 (forked) - StackBlitz

 

 

 

 

참고

 

https://velog.io/@reasonz/2022.06.22-JS-drag-and-drop%EC%9C%BC%EB%A1%9C-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9A%94%EC%86%8C%EC%9D%98-%EC%9C%84%EC%B9%98-%EB%B0%94%EA%BE%B8%EA%B8%B0 

https://duklook.tistory.com/399