fix: show dropzone

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) => (
   <Draggable draggableId={String(index)} index={index}>
     {(provided, snapshot) => (
@@ -23,7 +23,7 @@ export const DraggableListItem = ({
             totalIndex={index}
             draggableProps={provided.dragHandleProps}
           />
-          {activePlus && !snapshot.mode && (
+          {dropPlaceIndex === index && !snapshot.mode && (
             <Box
               sx={{
                 position: "absolute",

src/pages/Questions/DraggableList/index.tsx

@@ -9,8 +9,11 @@ import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions";
 import { reorder } from "./helper";
 
 import type { DropResult } from "react-beautiful-dnd";
+import { useState } from "react";
 
 export const DraggableList = () => {
+  const [draggableId, setDraggableId] = useState<number>(-1);
+  const [dropPlaceIndex, setDropPlaceIndex] = useState<number>(-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 (
-    <DragDropContext onDragEnd={onDragEnd}>
+    <DragDropContext
+      onDragStart={({ draggableId }) => setDraggableId(Number(draggableId))}
+      onDragUpdate={({ destination }) => {
+        setDropPlaceIndex(destination?.index ?? -1);
+      }}
+      onDragEnd={onDragEnd}
+    >
       <StrictModeDroppable droppableId="droppable-list">
-        {(provided, snapshot) => (
+        {(provided) => (
           <Box ref={provided.innerRef} {...provided.droppableProps}>
             {listQuestions.map((_, index) => (
               <DraggableListItem
                 key={index}
                 index={index}
-                activePlus={snapshot.isDraggingOver}
+                dropPlaceIndex={
+                  dropPlaceIndex < draggableId
+                    ? dropPlaceIndex - 1
+                    : dropPlaceIndex
+                }
               />
             ))}
             {provided.placeholder}