Commit 0b65c089 authored by jang dong hyeok's avatar jang dong hyeok
Browse files

dnd

parent 3e5d554b
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>
);
};
...@@ -73,7 +73,7 @@ export const Question = ({ ...@@ -73,7 +73,7 @@ export const Question = ({
return ( return (
<div <div
style={{ borderColor: isEditing ? "red" : "#0A8A8A" }} 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"> <div className="flex h-16 w-full place-content-center items-center">
<input <input
......
import React from "react"; import React, { useRef, useState, DragEvent } from "react";
import { CreateQuestionData } from "../types"; import { CreateQuestionData } from "../types";
import { Question } from "./Question"; import { Question } from "./Question";
import { DraggableItem } from "./DraggableItem";
type Props = { type Props = {
questions: CreateQuestionData[]; questions: CreateQuestionData[];
...@@ -13,15 +14,72 @@ export const QuestionsList = ({ ...@@ -13,15 +14,72 @@ export const QuestionsList = ({
handleQuestion, handleQuestion,
deleteQuestion, deleteQuestion,
}: Props) => { }: 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 ( return (
<> <>
{questions.map((question) => ( {questions.map((question) => (
<DraggableItem
key={question._id}
currentItemId={currentItemId}
question={question}
onDragStart={onDragStart}
onDrop={onDrop}
>
<Question <Question
key={question._id} key={question._id}
element={question} element={question}
handleQuestion={handleQuestion} handleQuestion={handleQuestion}
deleteQuestion={deleteQuestion} deleteQuestion={deleteQuestion}
/> />
</DraggableItem>
))} ))}
</> </>
); );
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment