diff --git a/src/pages/Questions/DraggableList/DraggableListItem.tsx b/src/pages/Questions/DraggableList/DraggableListItem.tsx index 18df6dcf..313ba36a 100644 --- a/src/pages/Questions/DraggableList/DraggableListItem.tsx +++ b/src/pages/Questions/DraggableList/DraggableListItem.tsx @@ -7,12 +7,12 @@ import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg"; type DraggableListItemProps = { index: number; - activePlus: boolean; + dropPlaceIndex: number; }; export const DraggableListItem = ({ index, - activePlus, + dropPlaceIndex, }: DraggableListItemProps) => ( {(provided, snapshot) => ( @@ -23,7 +23,7 @@ export const DraggableListItem = ({ totalIndex={index} draggableProps={provided.dragHandleProps} /> - {activePlus && !snapshot.mode && ( + {dropPlaceIndex === index && !snapshot.mode && ( { + const [draggableId, setDraggableId] = useState(-1); + const [dropPlaceIndex, setDropPlaceIndex] = useState(-1); const { listQuestions } = questionStore(); const onDragEnd = ({ destination, source }: DropResult) => { @@ -18,19 +21,31 @@ export const DraggableList = () => { const newItems = reorder(listQuestions, source.index, destination.index); updateQuestionsListDragAndDrop(newItems); + setDraggableId(-1); + setDropPlaceIndex(-1); } }; return ( - + setDraggableId(Number(draggableId))} + onDragUpdate={({ destination }) => { + setDropPlaceIndex(destination?.index ?? -1); + }} + onDragEnd={onDragEnd} + > - {(provided, snapshot) => ( + {(provided) => ( {listQuestions.map((_, index) => ( ))} {provided.placeholder}