From b7efee31a5c4346896e225e6cf08d15dee14e4da Mon Sep 17 00:00:00 2001
From: Tamara <tomka-zel@yandex.ru>
Date: Fri, 30 Jun 2023 22:10:47 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D1=80=D0=B0=D0=B3=20=D0=B8=20=D0=B4?=
 =?UTF-8?q?=D1=80=D0=BE=D0=BF=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=BB=D0=B0?=
 =?UTF-8?q?=D1=88=D0=B5=D0=BA=20=D0=B2=D0=BE=D0=BF=D1=80=D0=BE=D1=81=D0=BE?=
 =?UTF-8?q?=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Questions/QuestionPageCard.tsx | 23 ++++++++++++--
 src/pages/Questions/QuestionsPage.tsx    | 39 ++++++++++++++++--------
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/src/pages/Questions/QuestionPageCard.tsx b/src/pages/Questions/QuestionPageCard.tsx
index 4ea15ba0..a1820e6a 100644
--- a/src/pages/Questions/QuestionPageCard.tsx
+++ b/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" }}
             >
diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx
index b905711f..19836cc7 100755
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/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>
-
-        {Object.values(listQuestions[params]).map((e, index) => (
-            <QuestionsPageCard key={index} totalIndex={index} DeleteClick={() => removeQuestion(params,index)}/>
-            )
-        )}
-
-
+        <Box
+            onDragOver={onDragOver}
+            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