리액트 todo에서 만든 drag and drop

만든것

 

** 윈도우녹화로해서 저렇지 실제로 드래그 해서 옮긴거임....

 

---

HTML에 있는 onDragOver, onDrop onDragStart를 이용해서 구현했다.

 

메인 App.jsx에는

const handleDragStart = (e, list, index) => {
    const dragInfo = { list, index }
    e.dataTransfer.setData('text/plain', JSON.stringify(dragInfo))
    dragInfo.draggedList = list // draggedList 설정
  }

  const handleDrop = (e, list) => {
    e.preventDefault()

    const dropInfo = JSON.parse(e.dataTransfer.getData('text/plain'))
    // const { list: draggedList, index: draggedIndex } = dropInfo
    const draggedList = dropInfo.list
    const draggedIndex = dropInfo.index

    if (list === draggedList) return

    const newList = [...list]
    const draggedItem = draggedList[draggedIndex]

    newList.splice(draggedIndex, 0, draggedItem)
    console.log(draggedList)
    // draggedList.splice(draggedIndex, 1)
    const updatedList = draggedList.slice()
    updatedList.splice(draggedIndex, 1)
    console.log(draggedList, doList, list)
    // 상태 업데이트
    // 아래 list === doList부분은 JSON.stringify가 없어도 잘비교됨
    // 근데.. 위에는 있어야됨 why...??
    if (JSON.stringify(draggedList) === JSON.stringify(doList))
      setDoList([...updatedList])
    if (JSON.stringify(draggedList) === JSON.stringify(DoingList))
      setDoingList([...updatedList])
    if (JSON.stringify(draggedList) === JSON.stringify(DoneList))
      setDoneList([...updatedList])

    if (list === doList) setDoList([...newList])
    if (list === DoingList) setDoingList([...newList])
    if (list === DoneList) setDoneList([...newList])
  }
  const handleDragOver = (e) => {
    e.preventDefault()
  }

아직도 못 푼 객체 비교의 진실 ;;

 

리스트 컴포넌트에는 해당 Do,Done,Doing 을 이루는 전체 div에 onDragOver, onDrop이벤트를 걸었고

리스트 태그인 li에는 onDragStart를 넣었다.

 

코드를 다 넣으면 괜히 블로그 길만 길어서 보기도 불편하고 핵심 함수만 남김

어차피 내가 나중에 또 볼꺼기 때문

 

자세한 코드는

https://github.com/hyunjunyong/react-study

여기다 남겨뒀으니 까먹으면 확인할 수 있도록

 

 

---

※ 문뜩 든생각인데 내가 저렇게 링크 걸어두고 나중에 저걸 투두 지우고 다른걸로 만드는 만행을 저지르진 않겠지....?

에이 설마.../