拖拽的基本功能

coderInwind · coderInwind · commit adc6470a93eb · 2022-03-05T16:30:18.000+08:00
diff --git a/src/assets/style/reset.css b/src/assets/style/reset.css
@@ -1 +1,6 @@
 @import "~normalize.css";
+
+.body {
+  width: 100%;
+  height: 100vh;
+}
diff --git a/src/pages/Login/style.js b/src/pages/Login/style.js
@@ -7,8 +7,8 @@ export const LoginWrapper = styled.div`
   text-align: center;
   line-height: 50px;
   margin-left: 50%;
-  margin-top: 50vh;
-  transform: translateX(-50%);
+  margin-top: 50%;
+  transform: translateX(-50%) translateY(-50%);
   cursor: pointer;
 
   &:hover {
diff --git a/src/pages/Task/index.js b/src/pages/Task/index.js
@@ -1,8 +1,77 @@
-import React, { memo } from "react";
+import React, { memo, useRef, useState } from "react";
 import { TaskWrapper } from "./style";
 
 const Task = memo(() => {
-  return <TaskWrapper>Task</TaskWrapper>;
+  const [listIndex, setlistIndex] = useState(1);
+
+  const addInput = useRef();
+  const studyRef = useRef();
+  // 添加新的study
+  const add = () => {
+    //创建input元素(在input前创建一个空的div站位)
+    const newInput = document.createElement("input");
+    const blank = document.createElement("div");
+    blank.className = "blank";
+    addInput.current.before(newInput);
+    newInput.before(blank);
+    //给增加的input增加监听事件
+    const currentInput = studyRef.current.childNodes[listIndex];
+    let diffX;
+    let diffY;
+    let currentX;
+    let currentY;
+    //move监听函数
+    const moveFn = (e) => {
+      //还要减去margin的偏移量
+      currentInput.style.left = e.clientX - 20 - diffX + "px";
+      currentInput.style.top = e.clientY - diffY + "px";
+      console.log(e);
+    };
+    //添加监听器
+    currentInput.addEventListener(
+      "mousedown",
+      (e) => {
+        //按住
+
+        currentInput.style.position = "absolute";
+
+        diffX = e.clientX - currentInput.offsetLeft;
+        diffY = e.clientY - currentInput.offsetTop;
+        currentX = currentInput.style.left;
+        currentY = currentInput.style.top;
+
+        //moving
+        currentInput.addEventListener("mousemove", moveFn);
+      },
+      false
+    );
+
+    currentInput.addEventListener("mouseup", () => {
+      //松开的逻辑
+      // if(){
+
+      // }
+
+      currentInput.style.position = "";
+      currentInput.style.left = currentX;
+      currentInput.style.top = currentY;
+
+      currentInput.removeEventListener("mousemove", moveFn);
+    });
+    setlistIndex(listIndex + 2);
+  };
+
+  return (
+    <TaskWrapper>
+      <div className="study" ref={studyRef}>
+        <div className="add" ref={addInput} onClick={add}>
+          +
+        </div>
+      </div>
+      <div className="learning"></div>
+      <div className="complete"></div>
+    </TaskWrapper>
+  );
 });
 
 export default Task;
diff --git a/src/pages/Task/style.js b/src/pages/Task/style.js
@@ -1,3 +1,87 @@
 import styled from "styled-components";
 
-export const TaskWrapper = styled.div``;
+export const TaskWrapper = styled.div`
+  width: 700px;
+  min-height: 400px;
+  display: flex;
+  line-height: 50px;
+  margin-left: 50%;
+  margin-top: 30%;
+  transform: translateX(-50%) translateY(-50%);
+  justify-content: space-between;
+
+  .study,
+  .learning,
+  .complete {
+    width: 200px;
+  }
+
+  .study {
+    min-height: 400px;
+    background-color: #f5e0e1;
+    &::before {
+      content: "Prepare to study";
+      background-color: #f5e0e1;
+      display: block;
+      margin-top: -50px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+    }
+
+    input {
+      width: 150px;
+      height: 30px;
+      display: block;
+      margin-left: 20px;
+    }
+
+    .blank {
+      width: 200px;
+      height: 30px;
+    }
+
+    .add {
+      width: 40px;
+      height: 40px;
+      margin: 30px auto;
+      text-align: center;
+      line-height: 35px;
+      font-size: 40px;
+      border: 2px solid #c49b9b;
+      border-radius: 50%;
+
+      & {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .learning {
+    background-color: #a3d09b;
+
+    &::before {
+      content: "Learning";
+      background-color: #a3d09b;
+      display: block;
+      margin-top: -50px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+    }
+  }
+
+  .complete {
+    background-color: #e2e2e2;
+
+    &::before {
+      content: "Complete";
+      background-color: #e2e2e2;
+      display: block;
+      margin-top: -50px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+    }
+  }
+`;
