우당탕탕.. 팀프로젝트 리액트로 드래그 앤 드롭 구현하기

바닐라 JS 로 했듯... 이번에도 드래그앤드롭 구현을.. 맡아버렸다

근데 좀더... ?? 띠용한거 같다... 왜냐하면 전에 드래그앤드롭은 그냥 아무 위치에 스티커를 붙여주는 느낌이라면

이번 프로젝트는 드롭 타겟에 촥!! 붙어야 하는데

이게 가능할지 잘 모르겠다  ...ㅠㅠ

일단은 서칭과 노가다의 힘으로 드래그앤 드롭은 되긴한다!

 

  const onDragOver = e => {
    e.preventDefault();
  };

  const onDragStart = e => {
    e.dataTransfer.effectAllowed = 'move';
    const originPosTemp = { ...originPos };
    originPosTemp.x = e.target.offsetLeft; //칸반보드 컨텐츠 부분부터
    originPosTemp.y = e.target.offsetTop;
    setOriginPos(originPosTemp);
    console.log(originPosTemp);

    const clientPosTemp = { ...clientPos };
    clientPosTemp.x = e.clientX; // 브라우저 왼쪽 상단부터
    clientPosTemp.y = e.clientY;
    setClientPos(clientPosTemp);
    console.log('clientPosTemp', clientPosTemp);
  };

  const onDrag = e => {
    const PosTemp = { ...pos };
    console.log(pos.left, pos.top);
    // 자신이 위치한 칸반섹션 부터
    PosTemp.left = e.target.offsetLeft + e.clientX - clientPos.x;
    PosTemp.top = e.target.offsetTop + e.clientY - clientPos.y;
    setPos(PosTemp);

    console.log(PosTemp);

    const clientPosTemp = { ...clientPos };
    clientPosTemp.x = e.clientX;
    clientPosTemp.y = e.clientY;
    setClientPos(clientPosTemp);
  };
  
    const onDragEnd = e => {
    e.dataTransfer.dropEffect = 'move';
  };

clientX /clientY 는 브라우저 자체의 위치값을,

offsetLeft 는 컴포넌트 position 값에 기준이 되는 곳에서부터의 위치값을 나타내주므로

두 값을 더해준 값에 바로 일전의 client 값을 state 로 저장한다음 빼주면 그 차이만큼 움직인 것이 된다.

 

그리고 드래그 하는 동안 계속 client 값을 계산 해줘야 한다..

dragOver 랑 dragEnd 는 일단 아직 쓸 곳이 없어서 보통 하라는 방식으로 처리했다.

dragEnd 부분에 새로운 함수를 만들어서 해당 컴포넌트로 위치값을 계산하고 그 영역에 들어가면 위치값을 변경하거나 원래 있던 위치로 이동하거나 처리를 해줘야 하는데~~ 일단은 오늘은 여기까지 하기로 햇다.. 그냥 내가...