[TIL] 프리온보딩 3

Today . .

어제 drag and drop 기능을 기본적인 것만 완성해 놓고,
오늘은 css module 사용하여 코드짜는 걸 연습하기 위해 개인 과제를 진행했다.

eslint 룰이 너무 빡빡해서, 오류 해결하면서 추가도 해보고 수정도 하면서 많이 배웠다.
지금까지 코드를 짜면서 너무 대충했나? 반성도 했다 🥲

---

오늘 배운 것 🖌

< HTML Drag and Drop API >

• 내가 사용한 드래그 이벤트
  • dragstart : 요소를 드래그하기 시작했을 때 발생
  • dragover : 요소를 적합한 드롭 대상 위로 지나갈 때 발생
  • drop : 요소를 드롭 대상에 드롭했을 때 발생
  • dragend : 드래그를 끝냈을 때 발생 (마우스 버튼을 뗄 때)

   <li
              key={index}
              data-position={index}
              draggable='true'
              onDragStart={handleDragStart}
              onDragOver={handleDragOver}
              onDragEnd={handleDragEnd}
              onDrop={handleOnDrop}
    />

궁금했던 개념 🤔

1. dataTransfer

  const handleDragStart = (e) => {
    e.dataTransfer.setData('text/html', e.currentTarget)
  }

• 드롭 다운할 대상에게 현재 드래그하고 있는 요소 값을 추가한다.

  const handleDragEnd = (e) => {
    e.dataTransfer.dropEffect = 'move'
  }

• 현재 드래그 하는 요소에서, 드롭 다운하는 대상으로 데이터가 이동하게 한다.