dnd

frontend/src/surveys/DraggableItem.tsx

+import { style } from "d3";
+import React, { DragEvent } from "react";
+import { CreateQuestionData } from "../types";
+
+type Props = {
+  children: any;
+  currentItemId: string;
+  question: CreateQuestionData;
+  onDragStart: Function;
+  onDrop: Function;
+};
+
+export const DraggableItem = ({
+  children,
+  currentItemId,
+  question,
+  onDragStart,
+  onDrop,
+}: Props) => {
+  console.log("current item id:", currentItemId);
+  let counter = 0;
+
+  const handleDragStart = (e: DragEvent<HTMLDivElement>) => {
+    const { id } = e.currentTarget;
+    console.log(id, "drag start");
+    onDragStart(e);
+  };
+
+  const handleDragEnter = (e: DragEvent<HTMLDivElement>) => {
+    const { id } = e.currentTarget;
+    console.log(id, "drag enter");
+    counter++;
+    console.log("counter:", counter);
+    if (currentItemId !== String(id)) {
+      e.currentTarget.classList.add("active");
+    }
+  };
+
+  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
+    const { id } = e.currentTarget;
+    console.log(id, "drag leave");
+    counter--;
+    console.log("counter:", counter);
+    if (counter == 0) {
+      console.log("counter in handle drag leave", counter);
+      e.currentTarget.classList.remove("active");
+    }
+  };
+
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const { id } = e.currentTarget;
+    console.log(id, "drag over");
+  };
+
+  const handleDragEnd = (e: DragEvent<HTMLDivElement>) => {
+    const { id } = e.currentTarget;
+    console.log(id, "drag end");
+    e.currentTarget.classList.remove("active");
+    e.currentTarget.classList.remove("hint");
+  };
+
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const { id } = e.currentTarget;
+    console.log(id, "drop");
+    onDrop(e);
+    e.currentTarget.classList.remove("active");
+    e.currentTarget.classList.remove("hint");
+  };
+
+  return (
+    <div
+      id={question._id}
+      draggable={true}
+      className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 rounded-lg p-0 cursor-move"
+      onDragStart={handleDragStart}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragEnd={handleDragEnd}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {children}
+    </div>
+  );
+};

frontend/src/surveys/Question.tsx

@@ -73,7 +73,7 @@ export const Question = ({
   return (
     <div
       style={{ borderColor: isEditing ? "red" : "#0A8A8A" }}
-      className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg"
+      className="flex flex-col container w-full h-auto border-2 items-center m-0 p-0 rounded-lg"
     >
       <div className="flex h-16 w-full place-content-center items-center">
         <input

frontend/src/surveys/QuestionsList.tsx

-import React from "react";
+import React, { useRef, useState, DragEvent } from "react";
 import { CreateQuestionData } from "../types";
 import { Question } from "./Question";
+import { DraggableItem } from "./DraggableItem";
 
 type Props = {
   questions: CreateQuestionData[];
@@ -13,15 +14,72 @@ export const QuestionsList = ({
   handleQuestion,
   deleteQuestion,
 }: Props) => {
+  const [items, setItems] = useState(questions);
+  const currentItem = useRef<HTMLDivElement>();
+  const [currentItemId, setCurrentItemId] = useState<string>("");
+
+  function arrayMove(questionArr: any[], oldIndex: number, newIndex: number) {
+    questionArr.splice(newIndex, 0, questionArr.splice(oldIndex, 1)[0]);
+    return questionArr; // for testing
+  }
+
+  const onDragStart = (e: DragEvent<HTMLDivElement>) => {
+    currentItem.current = e.currentTarget;
+    const { id } = e.currentTarget;
+    const index = items.findIndex(
+      (question: CreateQuestionData) => question._id === String(id)
+    );
+    console.log(id, "drag start, ", "start index: ", index);
+    setCurrentItemId(id);
+  };
+
+  const onDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    // const { id } = e.target;
+    const { id } = e.currentTarget;
+    const curId = e.currentTarget.id;
+    const currentItemIndex = items.findIndex(
+      (question: CreateQuestionData) => question._id === curId
+    );
+    const dropIndex = items.findIndex(
+      (question: CreateQuestionData) => question.id === String(id)
+    );
+    console.log(
+      id,
+      "drop, ",
+      "current question:",
+      curId,
+      ", drop index:",
+      dropIndex,
+      ", currentItem index:",
+      currentItemIndex
+    );
+
+    const newArray = arrayMove(questions, currentItemIndex, dropIndex);
+    newArray.forEach((question, index) => {
+      question.order = index;
+    });
+    console.log("new array=", newArray);
+    setItems([...newArray]);
+  };
+
   return (
     <>
       {questions.map((question) => (
-        <Question
+        <DraggableItem
           key={question._id}
-          element={question}
-          handleQuestion={handleQuestion}
-          deleteQuestion={deleteQuestion}
-        />
+          currentItemId={currentItemId}
+          question={question}
+          onDragStart={onDragStart}
+          onDrop={onDrop}
+        >
+          <Question
+            key={question._id}
+            element={question}
+            handleQuestion={handleQuestion}
+            deleteQuestion={deleteQuestion}
+          />
+        </DraggableItem>
       ))}
     </>
   );