Skip to content

Commit d218101

Browse files
coderInwindcoderInwind
committed
完善了基本功能
1 parent dc9580e commit d218101

File tree

3 files changed

+108
-93
lines changed

3 files changed

+108
-93
lines changed

‎src/assets/style/reset.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1 @@
11
@import "~normalize.css";
2-
3-
.body {
4-
width: 100%;
5-
height: 100vh;
6-
}

‎src/pages/Login/style.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const LoginWrapper = styled.div`
77
text-align: center;
88
line-height: 50px;
99
margin-left: 50%;
10-
margin-top: 50%;
10+
margin-top: 400px;
1111
transform: translateX(-50%) translateY(-50%);
1212
cursor: pointer;
1313

‎src/pages/Task/index.js

Lines changed: 107 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { memo, useRef, useState } from "react";
22
import { TaskWrapper } from "./style";
33

44
const Task = memo(() => {
5-
const [listIndex, setlistIndex] = useState(1);
5+
const [listIndex, setlistIndex] = useState(0);
66

77
const taskRef = useRef();
88
const addInput = useRef();
@@ -14,73 +14,75 @@ const Task = memo(() => {
1414
const createElement = () => {
1515
//创建input元素(在input前创建一个空的div站位)
1616
const newInput = document.createElement("input");
17-
const blank = document.createElement("div");
18-
blank.className = "blank";
17+
// const blank = document.createElement("div");
18+
// blank.className = "blank";
1919
addInput.current.before(newInput);
20-
newInput.before(blank);
20+
// newInput.before(blank);
2121
};
2222

23-
const moveElement = (element) => {
23+
const moveElement = (element, value) => {
2424
const newInput = document.createElement("input");
25+
newInput.value = value;
2526
element.current.appendChild(newInput);
2627
};
2728

2829
// 添加新的study
2930
const add = () => {
3031
createElement();
3132
//给增加的input增加监听事件
32-
console.log(completeRef);
3333
const currentInput = studyRef.current.childNodes[listIndex];
34-
let diffX; //与外层的距离（input）
35-
let diffY;
36-
let currentX; //input框原始的位置
37-
let currentY;
38-
let mouseX; //鼠标的位置
39-
let mouseY;
40-
let taskX;
41-
let taskY;
42-
//move监听函数
43-
const moveFn = (e) => {
44-
//设置拖动时的位置(还要减去margin的偏移量)
45-
currentInput.style.left = e.clientX - 20 - diffX + "px";
46-
currentInput.style.top = e.clientY - diffY + "px";
47-
mouseX = e.clientX;
48-
mouseY = e.clientY;
49-
50-
//当鼠标进入学习或完成框中，边框发生变化
51-
taskX = taskRef.current.offsetLeft;
52-
taskY = taskRef.current.offsetTop;
53-
if (
54-
mouseX > taskX - 100 &&
55-
mouseX < taskX + 100 &&
56-
mouseY < taskY + learningRef.current.scrollHeight / 2 &&
57-
mouseY > taskY - learningRef.current.scrollHeight / 2
58-
) {
59-
// 改变边框
60-
learningRef.current.style.border = "2px solid #85eaff";
61-
} else {
62-
learningRef.current.style.border = "";
63-
}
64-
if (
65-
mouseX > taskX - 100 + learningRef.current.scrollWidth &&
66-
mouseX < taskX + 100 + learningRef.current.scrollWidth &&
67-
mouseY < taskY + completeRef.current.scrollHeight / 2 &&
68-
mouseY > taskY - completeRef.current.scrollHeight / 2
69-
) {
70-
// 改变边框
71-
completeRef.current.style.border = "2px solid #74787c";
72-
} else {
73-
completeRef.current.style.border = "";
74-
}
75-
76-
console.log(taskRef);
77-
78-
// console.log(mouseX, mouseY);
79-
};
80-
//添加监听器
81-
currentInput.addEventListener(
82-
"mousedown",
83-
(e) => {
34+
35+
if (currentInput) {
36+
setlistIndex(listIndex + 1);
37+
let diffX; //与外层的距离（input）
38+
let diffY;
39+
let currentX; //input框原始的位置
40+
let currentY;
41+
let mouseX; //鼠标的位置
42+
let mouseY;
43+
let taskX;
44+
let taskY;
45+
//move监听函数
46+
const moveFn = (e) => {
47+
//设置拖动时的位置(还要减去margin的偏移量)
48+
currentInput.style.left = e.clientX - 20 - diffX + "px";
49+
currentInput.style.top = e.clientY - diffY + "px";
50+
mouseX = e.clientX;
51+
mouseY = e.clientY;
52+
53+
//当鼠标进入学习或完成框中，边框发生变化
54+
taskX = taskRef.current.offsetLeft;
55+
taskY = taskRef.current.offsetTop;
56+
if (
57+
mouseX > taskX - 100 &&
58+
mouseX < taskX + 100 &&
59+
mouseY < taskY + learningRef.current.scrollHeight / 2 &&
60+
mouseY > taskY - learningRef.current.scrollHeight / 2
61+
) {
62+
// 改变边框
63+
learningRef.current.style.border = "2px solid #85eaff";
64+
} else {
65+
learningRef.current.style.border = "";
66+
}
67+
if (
68+
mouseX > taskX - 100 + learningRef.current.scrollWidth &&
69+
mouseX < taskX + 100 + learningRef.current.scrollWidth &&
70+
mouseY < taskY + completeRef.current.scrollHeight / 2 &&
71+
mouseY > taskY - completeRef.current.scrollHeight / 2
72+
) {
73+
// 改变边框
74+
completeRef.current.style.border = "2px solid #74787c";
75+
} else {
76+
completeRef.current.style.border = "";
77+
}
78+
79+
// console.log(taskRef);
80+
81+
// console.log(mouseX, mouseY);
82+
};
83+
84+
//mousedown监听函数
85+
const mouseDownFn = (e) => {
8486
//按住
8587

8688
currentInput.style.position = "absolute";
@@ -92,37 +94,55 @@ const Task = memo(() => {
9294

9395
//moving
9496
currentInput.addEventListener("mousemove", moveFn);
95-
},
96-
false
97-
);
98-
99-
currentInput.addEventListener("mouseup", () => {
100-
//松开的逻辑
101-
if (
102-
mouseX > taskX - 100 &&
103-
mouseX < taskX + 100 &&
104-
mouseY < taskY + learningRef.current.scrollHeight / 2 &&
105-
mouseY > taskY - learningRef.current.scrollHeight / 2
106-
) {
107-
moveElement(learningRef);
108-
//销毁原来的input
109-
}
110-
if (
111-
mouseX > taskX - 100 + learningRef.current.scrollWidth &&
112-
mouseX < taskX + 100 + learningRef.current.scrollWidth &&
113-
mouseY < taskY + completeRef.current.scrollHeight / 2 &&
114-
mouseY > taskY - completeRef.current.scrollHeight / 2
115-
) {
116-
moveElement(completeRef);
117-
}
118-
119-
currentInput.style.position = "";
120-
currentInput.style.left = currentX;
121-
currentInput.style.top = currentY;
122-
123-
currentInput.removeEventListener("mousemove", moveFn);
124-
});
125-
setlistIndex(listIndex + 2);
97+
};
98+
99+
//mouseup
100+
const mouseupFn = (e) => {
101+
//松开的逻辑
102+
// console.log(1231, e);
103+
if (
104+
mouseX > taskX - 100 &&
105+
mouseX < taskX + 100 &&
106+
mouseY < taskY + learningRef.current.scrollHeight / 2 &&
107+
mouseY > taskY - learningRef.current.scrollHeight / 2
108+
) {
109+
moveElement(learningRef, e.srcElement.value);
110+
//销毁原来的input,并做相应的操作
111+
studyRef.current.removeChild(e.srcElement);
112+
setlistIndex(listIndex - 1);
113+
learningRef.current.style.border = "";
114+
// console.log(123, e);
115+
console.log(1231, e.srcElement.value);
116+
// console.log(12312, listIndex);
117+
}
118+
if (
119+
mouseX > taskX - 100 + learningRef.current.scrollWidth &&
120+
mouseX < taskX + 100 + learningRef.current.scrollWidth &&
121+
mouseY < taskY + completeRef.current.scrollHeight / 2 &&
122+
mouseY > taskY - completeRef.current.scrollHeight / 2
123+
) {
124+
moveElement(completeRef, e.srcElement.value);
125+
studyRef.current.removeChild(e.srcElement);
126+
setlistIndex(listIndex - 1);
127+
128+
completeRef.current.style.border = "";
129+
}
130+
131+
currentInput.style.position = "";
132+
currentInput.style.left = currentX;
133+
currentInput.style.top = currentY;
134+
135+
currentInput.removeEventListener("mousemove", moveFn);
136+
};
137+
138+
//添加监听器
139+
currentInput.addEventListener("mousedown", mouseDownFn);
140+
141+
currentInput.addEventListener("mouseup", mouseupFn);
142+
//关闭监听
143+
// currentInput.removeEventListener("mousedown", mouseDownFn);
144+
// currentInput.removeEventListener("mouseup", mouseupFn);
145+
}
126146
};
127147

128148
return (

0 commit comments

Comments
 (0)