드래그 앤 드롭 이벤트

 

    <AttachmentPageBox onDragOver={handleDragOver}>
      {screenWidth > 769 && dragging && (
        <TempBox onDragEnd={handleDragEnd} onDragLeave={handleDragLeave} onDrop={handleDrop}>
          <VscNewFile size={60} />
          <Span fontSize="20px" color="#fff">
            Drop Files Here
          </Span>
        </TempBox>
      )}
      <AttachmentSection />
      <AttachmentDescriptionSection />
    </AttachmentPageBox>

React 컴포넌트에서 드래그 이벤트를 처리

dragging은 드래그 동작이 현재 진행 중인지를 나타내는 state

드래그가 아닐 때에는 false, 드래그 중일때는 true가 되어 드롭 영역이 나타나도록 한다.

 

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setDragging(true);
  };

=> 드래그 이벤트는 e.preventDefault(); 로 기본 동작을 막아주도록 한다.

 

handleDragOver

페이지에서 드래그 중일 때 드롭영역이 나타나게 함

 

handleDragEnd

드래그 동작을 끝냈을 때 드롭영역이 사라지게 함

handleDragLeave

드래그 중에 마우스가 페이지 또는 브라우저 외의 영역으로 벗어날 때 드롭영역이 사라지게 함

handleDrop

드롭된 파일들을 pushNewlyAttachedFiles 함수에 전달 파일을 slice에 저장시킨다.

 

드래그 이벤트 종류

https://learn.microsoft.com/ko-kr/dotnet/desktop/winforms/input-mouse/events?view=netdesktop-7.0 

마우스 이벤트 사용 - Windows Forms .NET