메바동 서식지

react-beautiful-dnd 라이브러리를 이용하여 Droppable 요소 내의 정렬을 지원하지 않고, 위치시킨 순서대로 정렬하도록 구현을 하니 아래와 같은 문제가 굉장히 신경 쓰였다. Draggable 요소를 드래그했을 때, transform: translate(x, y) 스타일을 이용하여 해당 요소를 움직이도록 하고 있기 때문에 요소가 있던 부분이 사라지는 것이 신경 쓰였다. 다른 공간에 드롭을 했을 때는 문제없었지만, 위와 같이 동일한 공간에 드롭을 시켰을 경우 기능상으로는 문제가 없지만 보기 좋지 않았다. import { Card } from 'antd'; import { Draggable } from 'react-beautiful-dnd'; function ItemCard({ id, ind..

지금 하고 있는 프로젝트에서 Drag and Drop 기능을 구현하기 위해 react-beautiful-dnd 라이브러리를 사용하고 있다. react-beautiful-dnd를 사용하면 요소 간의 순서를 변경하기 용이하지만, 요소 간의 순서 변경이 필요 없고 단순히 이동만 구현하려고 하는데 draggable 요소가 움직이는 것이 거슬렸다. 단순 이동만 구현하려는데 위와 같이 정렬 애니메이션이 들어가는 것은 사용자에게 혼란을 줄 수도 있기에 요소가 움직이는 것을 막기로 하였다. import { Card } from 'antd'; import { Draggable } from 'react-beautiful-dnd'; function ItemCard({ id, index, title, content }) { ..