.

frontend/src/surveys/Question.tsx

@@ -23,8 +23,6 @@ export const Question = ({
   const [question, setQuestion] = useState(element);
   const isEditing = question.isEditing;
 
-  const [questions, setQuestions] = useState();
-
   async function handleEditComplete() {
     question.content.choices.map((choice) => {
       if (choice.text.trim() === "") {
@@ -86,12 +84,11 @@ export const Question = ({
       const dropResult = monitor.getDropResult<DropResult>();
       if (item && dropResult) {
         alert(`You dropped ${item.name}`);
-      } else {
-        alert("you dropped wrong place");
       }
     },
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
+      handlerId: monitor.getHandlerId(),
     }),
   }));
 
@@ -101,22 +98,19 @@ export const Question = ({
       isOver: monitor.isOver(),
       canDrop: monitor.canDrop(),
     }),
+    hover(item, monitor) {
+      if (!isDragging) {
+        return;
+      }
+    },
   }));
 
   //
   return (
-    <div
-      ref={drop}
-      className="flex w-4/5 h-full justify-center"
-      style={{
-        border: isOver ? "dotted" : "",
-      }}
-    >
+    <div ref={drop} className="flex w-full h-full justify-center">
       <div
         ref={drag}
-        style={{
-          borderColor: isEditing ? "red" : "#0A8A8A",
-        }}
+        style={{ borderColor: isEditing ? "red" : "#0A8A8A" }}
         className={
           "flex flex-col container w-full h-auto border-2 items-center m-3 py-2 rounded-lg cursor-move "
         }