[React] draggable snapshot(1)

오트밀·2022년 3월 6일
0

재미없지만 droppable snapshot을 사용할 때와 똑같이 적용하면 된다.

DraggableCard.tsx

const Card = styled.div<{ isDragging: boolean }>`
  ...
  background-color: ${(props) =>
    props.isDragging ? '#74b9ff' : props.theme.cardColor};
  box-shadow: ${(props) =>
    props.isDragging ? '0px 2px 5px rgba(0,0,0,0.05)' : 'none'};
`;

 <Draggable key={toDo} draggableId={toDo} index={index}>
      {(provided, snapshot) => (
        <Card
          isDragging={snapshot.isDragging}
          ...
        >
          {toDo}
        </Card>
      )}
    </Draggable>

snapshot 속성을 추가한다.
isDragging={snapshot.isDragging}

그리고 Card에
props.isDragging 일때 색상을 바꾸는 로직을 추가한다.

참고로 Draggable interface의 속성은 이렇다.

index.d.ts

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

0개의 댓글