[REACT] Drag and Drop - snapshot의 isDragging

학습일 : 2023. 05. 02

---

DragabbleCard.tsx에서도 snapshot을 넘겨주고
오른쪽 마우스를 클릭하여 타입의 정의를 살펴보면

 

 

<DragabbleCard.tsx>

export interface DraggableStateSnapshot {
    isDragging: boolean;
    isDropAnimating: boolean;
    isClone: boolean;
    dropAnimation: DropAnimation | null | undefined;
    draggingOver: DroppableId | null | undefined;
    // the id of a draggable that you are combining with
    combineWith: DraggableId | null | undefined;
    // a combine target is being dragged over by
    combineTargetFor: DraggableId | null | undefined;
    // What type of movement is being done: 'FLUID' or 'SNAP'
    mode: MovementMode | null | undefined;
}

이러한 것들을 얻을 수가 있는데,
일단은 isDragging만 필요하기 때문에 알아만 두도록 한다.

 

 

<DragabbleCard.tsx>
Card에 isDragging을 써주고
Card는 styled component라서 isDragging이라는 prop을 인식할 수 없기 때문에
Card styled component를 정의해준 부분에 <{ isDragging: boolean }>을 추가해주면 된다.
그리고 카드의 배경색을 isDragging일때 카드가 노란색이 되도록 조건을 추가해주었다.

import React from "react";
import { Draggable } from "react-beautiful-dnd";
import styled from "styled-components";

// 각각의 toDo들
const Card = styled.div<{ isDragging: boolean }>`
  border-radius: 5px;
  margin-bottom: 5px;
  background-color: ${(props) =>
    props.isDragging ? "yellow" : props.theme.cardColor}; // 
  padding: 10px 10px;
  min-width: 18rem;
`;

interface IDragabbleCardProps {
  toDo: string;
  index: number;
}

function DragabbleCard({ toDo, index }: IDragabbleCardProps) {
  return (
    <Draggable key={toDo} draggableId={toDo} index={index}>
      {(magic, snapshot) => (
        <Card
          isDragging={snapshot.isDragging}
          ref={magic.innerRef}
          {...magic.draggableProps}
          {...magic.dragHandleProps}
        >
          {toDo}
        </Card>
      )}
    </Draggable>
  );
}

export default React.memo(DragabbleCard);

실행결과

 

css를 조금 수정

 

 

실행결과

 

 

색상 참고 사이트
https://flatuicolors.com/palette/us