Skip to content

Commit 55ab0ab

Browse files
coderInwindcoderInwind
committed
完成
1 parent d218101 commit 55ab0ab

File tree

2 files changed

+249
-74
lines changed

2 files changed

+249
-74
lines changed

‎src/pages/Task/index.js

Lines changed: 204 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -12,79 +12,155 @@ const Task = memo(() => {
1212

1313
//添加input框
1414
const createElement = () => {
15-
//创建input元素(在input前创建一个空的div站位)
1615
const newInput = document.createElement("input");
17-
// const blank = document.createElement("div");
18-
// blank.className = "blank";
16+
1917
addInput.current.before(newInput);
20-
// newInput.before(blank);
2118
};
2219

2320
const moveElement = (element, value) => {
24-
const newInput = document.createElement("input");
25-
newInput.value = value;
21+
const newInput = document.createElement("div");
22+
const deleteBtn = document.createElement("div");
23+
//创建删除按钮并添加事件
24+
deleteBtn.className = "delete";
25+
deleteBtn.innerHTML = "x";
26+
deleteBtn.addEventListener("click", btnDelete);
27+
28+
newInput.className = "input";
29+
newInput.innerHTML = value;
30+
newInput.appendChild(deleteBtn);
2631
element.current.appendChild(newInput);
2732
};
2833

34+
const btnDelete = (e) => {
35+
// console.log(e.path[2].className);
36+
if (e.path[2].className === "learning") {
37+
learningRef.current.removeChild(e.path[1]);
38+
} else if (e.path[2].className === "complete") {
39+
completeRef.current.removeChild(e.path[1]);
40+
}
41+
};
42+
2943
// 添加新的study
3044
const add = () => {
3145
createElement();
3246
//给增加的input增加监听事件
3347
const currentInput = studyRef.current.childNodes[listIndex];
48+
if (listIndex < 0) {
49+
setlistIndex(0);
50+
}
51+
setlistIndex(listIndex + 1);
52+
let diffX; //与外层的距离（input）
53+
let diffY;
54+
let currentX; //input框原始的位置
55+
let currentY;
56+
let mouseX; //鼠标的位置
57+
let mouseY;
58+
let taskX;
59+
let taskY;
60+
//move监听函数
61+
const moveFn = (e) => {
62+
//设置拖动时的位置(还要减去margin的偏移量)
63+
currentInput.style.left = e.clientX - 20 - diffX + "px";
64+
currentInput.style.top = e.clientY - diffY + "px";
65+
mouseX = e.clientX;
66+
mouseY = e.clientY;
3467

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-
}
68+
//当鼠标进入学习或完成框中，边框发生变化
69+
taskX = taskRef.current.offsetLeft;
70+
taskY = taskRef.current.offsetTop;
71+
if (
72+
mouseX > taskX - 100 &&
73+
mouseX < taskX + 100 &&
74+
mouseY < taskY + learningRef.current.scrollHeight / 2 &&
75+
mouseY > taskY - learningRef.current.scrollHeight / 2
76+
) {
77+
// 改变边框
78+
learningRef.current.style.border = "2px solid #85eaff";
79+
} else {
80+
learningRef.current.style.border = "";
81+
}
82+
if (
83+
mouseX > taskX - 100 + learningRef.current.scrollWidth &&
84+
mouseX < taskX + 100 + learningRef.current.scrollWidth &&
85+
mouseY < taskY + completeRef.current.scrollHeight / 2 &&
86+
mouseY > taskY - completeRef.current.scrollHeight / 2
87+
) {
88+
// 改变边框
89+
completeRef.current.style.border = "2px solid #74787c";
90+
} else {
91+
completeRef.current.style.border = "";
92+
}
7893

79-
// console.log(taskRef);
94+
// console.log(taskRef);
8095

81-
// console.log(mouseX, mouseY);
82-
};
96+
// console.log(mouseX, mouseY);
97+
};
8398

84-
//mousedown监听函数
85-
const mouseDownFn = (e) => {
86-
//按住
99+
//mousedown监听函数
100+
const mouseDownFn = (e) => {
101+
//按住
102+
103+
currentInput.style.position = "absolute";
104+
105+
diffX = e.clientX - currentInput.offsetLeft;
106+
diffY = e.clientY - currentInput.offsetTop;
107+
currentX = currentInput.style.left;
108+
currentY = currentInput.style.top;
109+
110+
//moving
111+
currentInput.addEventListener("mousemove", moveFn);
112+
};
113+
114+
//mouseup
115+
const mouseupFn = (e) => {
116+
//松开的逻辑
117+
// console.log(1231, e);
118+
if (
119+
mouseX > taskX - 100 &&
120+
mouseX < taskX + 100 &&
121+
mouseY < taskY + learningRef.current.scrollHeight / 2 &&
122+
mouseY > taskY - learningRef.current.scrollHeight / 2
123+
) {
124+
moveElement(learningRef, e.srcElement.value);
125+
//销毁原来的input,并做相应的操作
126+
studyRef.current.removeChild(e.srcElement);
127+
setlistIndex(listIndex - 1);
128+
learningRef.current.style.border = "";
129+
// console.log(123, e);
130+
console.log(1231, e.srcElement.value);
131+
// console.log(12312, listIndex);
132+
}
133+
if (
134+
mouseX > taskX - 100 + learningRef.current.scrollWidth &&
135+
mouseX < taskX + 100 + learningRef.current.scrollWidth &&
136+
mouseY < taskY + completeRef.current.scrollHeight / 2 &&
137+
mouseY > taskY - completeRef.current.scrollHeight / 2
138+
) {
139+
moveElement(completeRef, e.srcElement.value);
140+
studyRef.current.removeChild(e.srcElement);
141+
setlistIndex(listIndex - 1);
142+
143+
completeRef.current.style.border = "";
144+
}
145+
146+
currentInput.style.position = "";
147+
currentInput.style.left = currentX;
148+
currentInput.style.top = currentY;
149+
150+
currentInput.removeEventListener("mousemove", moveFn);
151+
};
152+
153+
//兼容bug//没有获取到当前新创建的input时
154+
if (currentInput) {
155+
//添加监听器
87156

157+
currentInput.addEventListener("mousedown", mouseDownFn);
158+
currentInput.addEventListener("mouseup", mouseupFn);
159+
} else {
160+
console.log(231, studyRef);
161+
studyRef.current.childNodes[0].addEventListener("mousedown", (e) => {
162+
//按住
163+
const currentInput = studyRef.current.childNodes[0];
88164
currentInput.style.position = "absolute";
89165

90166
diffX = e.clientX - currentInput.offsetLeft;
@@ -93,13 +169,48 @@ const Task = memo(() => {
93169
currentY = currentInput.style.top;
94170

95171
//moving
96-
currentInput.addEventListener("mousemove", moveFn);
97-
};
172+
studyRef.current.childNodes[0].addEventListener("mousemove", (e) => {
173+
const currentInput = studyRef.current.childNodes[0];
174+
//设置拖动时的位置(还要减去margin的偏移量)
175+
currentInput.style.left = e.clientX - 20 - diffX + "px";
176+
currentInput.style.top = e.clientY - diffY + "px";
177+
mouseX = e.clientX;
178+
mouseY = e.clientY;
179+
180+
//当鼠标进入学习或完成框中，边框发生变化
181+
taskX = taskRef.current.offsetLeft;
182+
taskY = taskRef.current.offsetTop;
183+
if (
184+
mouseX > taskX - 100 &&
185+
mouseX < taskX + 100 &&
186+
mouseY < taskY + learningRef.current.scrollHeight / 2 &&
187+
mouseY > taskY - learningRef.current.scrollHeight / 2
188+
) {
189+
// 改变边框
190+
learningRef.current.style.border = "2px solid #85eaff";
191+
} else {
192+
learningRef.current.style.border = "";
193+
}
194+
if (
195+
mouseX > taskX - 100 + learningRef.current.scrollWidth &&
196+
mouseX < taskX + 100 + learningRef.current.scrollWidth &&
197+
mouseY < taskY + completeRef.current.scrollHeight / 2 &&
198+
mouseY > taskY - completeRef.current.scrollHeight / 2
199+
) {
200+
// 改变边框
201+
completeRef.current.style.border = "2px solid #74787c";
202+
} else {
203+
completeRef.current.style.border = "";
204+
}
98205

99-
//mouseup
100-
const mouseupFn = (e) => {
206+
// console.log(taskRef);
207+
208+
// console.log(mouseX, mouseY);
209+
});
210+
});
211+
studyRef.current.childNodes[0].addEventListener("mouseup", (e) => {
101212
//松开的逻辑
102-
// console.log(1231, e);
213+
const currentInput = studyRef.current.childNodes[0];
103214
if (
104215
mouseX > taskX - 100 &&
105216
mouseX < taskX + 100 &&
@@ -132,16 +243,40 @@ const Task = memo(() => {
132243
currentInput.style.left = currentX;
133244
currentInput.style.top = currentY;
134245

135-
currentInput.removeEventListener("mousemove", moveFn);
136-
};
246+
currentInput.removeEventListener("mousemove", (e) => {
247+
//设置拖动时的位置(还要减去margin的偏移量)
248+
currentInput.style.left = e.clientX - 20 - diffX + "px";
249+
currentInput.style.top = e.clientY - diffY + "px";
250+
mouseX = e.clientX;
251+
mouseY = e.clientY;
137252

138-
//添加监听器
139-
currentInput.addEventListener("mousedown", mouseDownFn);
140-
141-
currentInput.addEventListener("mouseup", mouseupFn);
142-
//关闭监听
143-
// currentInput.removeEventListener("mousedown", mouseDownFn);
144-
// currentInput.removeEventListener("mouseup", mouseupFn);
253+
//当鼠标进入学习或完成框中，边框发生变化
254+
taskX = taskRef.current.offsetLeft;
255+
taskY = taskRef.current.offsetTop;
256+
if (
257+
mouseX > taskX - 100 &&
258+
mouseX < taskX + 100 &&
259+
mouseY < taskY + learningRef.current.scrollHeight / 2 &&
260+
mouseY > taskY - learningRef.current.scrollHeight / 2
261+
) {
262+
// 改变边框
263+
learningRef.current.style.border = "2px solid #85eaff";
264+
} else {
265+
learningRef.current.style.border = "";
266+
}
267+
if (
268+
mouseX > taskX - 100 + learningRef.current.scrollWidth &&
269+
mouseX < taskX + 100 + learningRef.current.scrollWidth &&
270+
mouseY < taskY + completeRef.current.scrollHeight / 2 &&
271+
mouseY > taskY - completeRef.current.scrollHeight / 2
272+
) {
273+
// 改变边框
274+
completeRef.current.style.border = "2px solid #74787c";
275+
} else {
276+
completeRef.current.style.border = "";
277+
}
278+
});
279+
});
145280
}
146281
};
147282

‎src/pages/Task/style.js

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const TaskWrapper = styled.div`
2424
background-color: #f5e0e1;
2525
display: block;
2626
margin-top: -50px;
27+
margin-bottom: 30px;
2728
height: 30px;
2829
line-height: 30px;
2930
text-align: center;
@@ -34,6 +35,7 @@ export const TaskWrapper = styled.div`
3435
height: 30px;
3536
display: block;
3637
margin-left: 20px;
38+
margin-bottom: 30px;
3739
}
3840
3941
.blank {
@@ -59,11 +61,33 @@ export const TaskWrapper = styled.div`
5961
6062
.learning {
6163
background-color: #a3d09b;
62-
input {
64+
.input {
6365
width: 150px;
6466
height: 30px;
65-
display: block;
6667
margin: 30px 20px;
68+
border: 1px solid;
69+
text-align: center;
70+
line-height: 30px;
71+
background-color: #fff;
72+
position: relative;
73+
74+
.delete {
75+
width: 18px;
76+
height: 18px;
77+
display: inline-block;
78+
border-radius: 50%;
79+
background-color: #f173ac;
80+
line-height: 16px;
81+
color: #fff;
82+
left: 140px;
83+
top: -10px;
84+
position: absolute;
85+
86+
&:hover {
87+
cursor: pointer;
88+
background-color: #d93a49;
89+
}
90+
}
6791
}
6892
6993
&::before {
@@ -80,13 +104,29 @@ export const TaskWrapper = styled.div`
80104
.complete {
81105
background-color: #e2e2e2;
82106
83-
input {
107+
.input {
84108
width: 150px;
85109
height: 30px;
86-
display: block;
87110
margin: 30px 20px;
111+
border: 1px solid;
112+
text-align: center;
113+
line-height: 30px;
114+
background-color: #fff;
115+
}
116+
.delete {
117+
width: 18px;
118+
height: 18px;
119+
display: block;
120+
border-radius: 50%;
121+
background-color: #f173ac;
122+
line-height: 16px;
123+
color: #fff;
124+
margin-left: 140px;
125+
margin-top: -10px;
126+
&:hover {
127+
cursor: pointer;
128+
}
88129
}
89-
90130
&::before {
91131
content: "Complete";
92132
background-color: #e2e2e2;

0 commit comments

Comments
 (0)