драг и дроп для плашек вопросов

src/pages/Questions/QuestionPageCard.tsx

@@ -10,10 +10,8 @@ import React, {useState} from "react";
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import {useParams} from "react-router-dom";
 import {questionStore} from "@root/questions";
-import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CopyIcon from "@icons/questionsPage/CopyIcon";
 import CrossedEyeIcon from "@icons/CrossedEyeIcon";
-import EyeIcon from "@icons/EyeIcon";
 import HideIcon from "@icons/questionsPage/hideIcon";
 
 interface Props {
@@ -22,13 +20,32 @@ interface Props {
 }
 
 export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
+
+    function onDragStart(event: any) {
+        event
+            .dataTransfer
+            .setData('text', event.target.id);
+    }
+
+
     const theme = useTheme();
     const params = Number(useParams().quizId);
     const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
     const [isExpanded, setIsExpanded] = useState<boolean>(false);
     const switchState = listQuestions[params][totalIndex].type
     return (
-        <Paper draggable="true" sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0", backgroundColor: isExpanded ? "white" : "#333647" }}>
+        <Paper
+            draggable="true"
+            id={String(totalIndex)}
+            sx={{
+                maxWidth: "796px",
+                width: "100%",
+                borderRadius: "12px",
+                margin: "20px 0",
+                backgroundColor: isExpanded ? "white" : "#333647"
+            }}
+            onDragStart={onDragStart}
+        >
             <Box
                 sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
             >

src/pages/Questions/QuestionsPage.tsx

@@ -23,12 +23,25 @@ export default function QuestionsPage() {
         let result = listQuizes[params].step - 1
         updateQuizesList(params, {step: result ? result : 1})
     };
-    // const [switchState, setSwitchState] = React.useState('');
-    // const SSHC = (data: string) => {
-    //     setSwitchState(data)
-    // }
 
-  const theme = useTheme();
+    function onDragOver(event: any) {
+        event.preventDefault();
+    }
+
+    function onDrop(event: any) {
+        const id = event
+            .dataTransfer
+            .getData('text');
+        const draggableElement = document.getElementById(id);
+        const dropzone = event.target;
+        dropzone.appendChild(draggableElement);
+        event
+            .dataTransfer
+            .clearData();
+    }
+
+
+    const theme = useTheme();
   return (
     <>
       {/*<Stepper activeStep={activeStep} desc={"Задайте вопросы"} />*/}
@@ -41,13 +54,15 @@ export default function QuestionsPage() {
               textDecorationColor: theme.palette.brightPurple.main
           }}>Свернуть всё</Link>
       </Box>
-
+        <Box
-        {Object.values(listQuestions[params]).map((e, index) => (
+            onDragOver={onDragOver}
-            <QuestionsPageCard key={index} totalIndex={index} DeleteClick={() => removeQuestion(params,index)}/>
+            onDrop={onDrop}
-            )
+        >
-        )}
+            {Object.values(listQuestions[params]).map((e, index) => (
-
+                    <QuestionsPageCard key={index} totalIndex={index} DeleteClick={() => removeQuestion(params,index)}/>
-
+                )
+            )}
+        </Box>
 
       <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
         <IconButton