javascript - 我已经通过模板字面创建了任务,并希望将名称拖放到我想要的任务中。
`
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Task Manager</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="main-container">
<header>
<h1>TASK MANAGER</h1>
<div id="task-value-check"></div>
<div id="member-value-check"></div>
<div id="input">
<div id="task-form">
<form onsubmit="createTask(event)">
<input name="task" type="text" placeholder="Name of
new task">
<input type="submit" value="ADD"/>
</form>
</div>
<div id="tasks-header">TASKS</div>
<div id="member-form">
<form onsubmit="createMember(event)">
<input name="teamMember" type="text"
placeholder="Name of new team member">
<input type="submit" value="ADD"/>
</form>
</div>
<div id="members-header">TEAM MEMBERS</div>
</div>
</header>
<main>
<div id="assign-value-check"></div>
<div id="assign-form">
<form onsubmit="assignToMember(event)">
<input id="check-task" type="text"
placeholder="Pick task">
<input type="submit" id="assign-button" value="ASSIGN"
class="input-submit">
</form>
</div>
<div id="assignments-header">TASK ASSIGNMENTS</div>
<main>
<div id="listing">
<div id="tasks-rendering"></div>
<div id="members-rendering"></div>
<div id="assignments-rendering"></div>
</div>
</main>
</div>
<script src=index.js></script>
</body>
</html>
function createTask(event) {
event.preventDefault();
let task = document.querySelector("[name='task']").value;
task = task.toLowerCase();
const taskList = JSON.parse(localStorage.getItem('task')) || [];
if (task === "") {
document.getElementById("task-value-check").innerHTML = "PLEASE ENTER A TASK";
} else {
document.getElementById("task-value-check").innerHTML = "";
document.getElementById("member-value-check").innerHTML = "";
const tasks = { task};
taskList.push(tasks);
window.localStorage.setItem('task', JSON.stringify(taskList));
event.target.reset();
renderTaskList();
}
}
function createMember(event) {
event.preventDefault();
let member = document.querySelector("[name='teamMember']").value;
member = member.toLowerCase();
if (member === "") {
document.getElementById("member-value-check").innerHTML = "PLEASE ENTER A TEAM MEMBER";
} else {
document.getElementById("member-value-check").innerHTML = "";
document.getElementById("task-value-check").innerHTML = "";
const members = { member };
const memberList = JSON.parse(localStorage.getItem('member')) || [];
memberList.push(members);
window.localStorage.setItem('member', JSON.stringify(memberList));
event.target.reset();
renderMemberList();
}
}
function assignToMember(event) {
event.preventDefault();
const taskList = JSON.parse(localStorage.getItem('task')) || {};
let nameTask = document.getElementById('check-task').value;
let valueCheck = document.getElementById('assign-value-check');
if (nameTask === "") {
valueCheck.innerHTML = "PLEASE ENTER A TASK AND A TEAM MEMBER";
} else if (nameTask === "") {
valueCheck.innerHTML = "PLEASE ENTER A TASK";
} else {
valueCheck.innerHTML = "";
nameTask = nameTask.toLowerCase();
const assignMemberList = JSON.parse(localStorage.getItem('assignment')) || [];
let task;
if (nameTask != '') {
for (const a of taskList) {
if (a.task === nameTask) {
task = a.task;
}
}
if (task != undefined) {
let assignToMember = {task};
assignMemberList.push(assignToMember);
window.localStorage.setItem('assignment', JSON.stringify(assignMemberList));
} else {
valueCheck.innerHTML = "PLEASE ENTER AN EXISTING TASK AND/OR TEAM MEMBER";
}
renderUpdatedTaskList();
}
event.target.reset();
}
}
function renderTaskList() {
const taskList = JSON.parse(window.localStorage.getItem("task")) || [];
const taskListOutput = document.getElementById("tasks-rendering");
taskListOutput.innerHTML = "";
for (const a of taskList) {
let taskElement = document.createElement("div");
taskElement.innerHTML = `<div>
<h4>${a.task.charAt(0).toUpperCase() + a.task.slice(1)}</h4>
</div>`;
taskListOutput.appendChild(taskElement);
}
}
function renderMemberList() {
const memberList = JSON.parse(window.localStorage.getItem("member")) || [];
const memberListOutput = document.getElementById("members-rendering");
memberListOutput.innerHTML = "";
for (const m of memberList) {
let memberElement = document.createElement("div");
memberElement.innerHTML = `<div draggable="true"
ondragstart="drag(event)">
<h4 id="drag1">${m.member.charAt(0).toUpperCase() +
m.member.slice(1)}</h4>
</div>`;
memberListOutput.appendChild(memberElement);
}
}
我试图将名称拖放到不同的任务中,但当我这样做时,名称只出现在第一个创建的任务中。我希望能够将名称拖放到我想要的任务中。我还希望在网站刷新时,它们能留在那里。
function renderUpdatedTaskList(){
const assignMemberList = JSON.parse(localStorage.getItem('assignment')) || [];
const assignmentListOutput = document.getElementById('assignments-rendering');
assignmentListOutput.innerHTML = "";
for (const a of assignMemberList) {
let assignmentElement = document.createElement("div");
assignmentElement.innerHTML = `<div id="assignment-object-render"
ondragover="allowdrop(event)">
<h1>${a.task.charAt(0).toUpperCase() + a.task.slice(1)}</h1>
<br>
<p>medlemmer</p>
<div ondragover="allowdrop(event)" ondrop="drop(event)">
</div>
</div>`;
assignmentListOutput.appendChild(assignmentElement);
}
renderMemberNamesOnTask();
}
function allowdrop(ev) {
ev.preventDefault();
}
function drag(ev) {
let memberInfo = ev.target.innerText;
ev.dataTransfer.setData("text/plain", memberInfo);
}
function drop(ev) {
ev.preventDefault();
const taskAndMember = JSON.parse(localStorage.getItem("taskAndMember")) || [];
let memberInfo = ev.dataTransfer.getData("text/plain");
task = ev.target.parentElement.querySelector("h1").innerText;
ev.target.append(memberInfo);
memberAndTask = {task, memberInfo};
taskAndMember.push(memberAndTask);
window.localStorage.setItem("taskAndMember", JSON.stringify(taskAndMember));
renderUpdatedTaskList();
}
function renderMemberNamesOnTask(){
const taskAndMember = JSON.parse(localStorage.getItem("taskAndMember")) || [];
let membersDiv = document.querySelectorAll(".membersDiv");
membersDiv.innerHTML = "";
for(const m of taskAndMember){
let htmlTxt = document.createElement("div");
htmlTxt.innerHTML = `${m.memberInfo}`;
我拖到任务上的每个名字都只会出现在第一个创建的任务上。我很确定问题出在这里。 membersDiv.appendChild(htmlTxt); }
}
`
【回答】:
`
body{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
#main-container{
position: relative;
background-color: gainsboro;
margin: 0 auto;
width: 800px;
height: 1000px;
border-bottom: 30px solid floralwhite;
}
header{
z-index: 2;
position: absolute;
width: 800px;
height: 100px;
background-color: floralwhite;
text-align: center;
}
.text-input{
font-size: 15px;
border: 1px solid white;
height: 17px;
width: 250px;
}
.button{
font-size: 14px;
border: 1px solid white;
color: grey;
height: 20px;
width: 50px;
}
#task-form{
position: absolute;
left: 40px;
margin-top: 15px;
top: 110px;
}
#member-form{
position: absolute;
right: 40px;
margin-top: 15px;
top: 110px;
}
.value-check{
position: absolute;
z-index: 3;
top: 110px;
font-size: 12px;
color: red;
}
#task-value-check{
left: 40px;
}
#member-value-check{
right: 210px;
}
#assign-value-check{
top: 561px;
left: 135px;
}
.header{
position: absolute;
z-index: 2;
top: 170px;
background-color: antiquewhite;
color: grey;
border-bottom: 1px solid white;
height: 20px;
width: 370px;
font-size: 15px;
padding: 10px;
}
#tasks-header{
left: 0px;
}
#members-header{
right: 0px;
}
#assignments-header{
top: 620px;
width: 780px;
text-align: center;
}
#assign-form{
position: absolute;
left: 220px;
top: 578px;
}
#check-task{
position: absolute;
left: -85px;
}
#check-member{
position: absolute;
right: -445px;
}
#assign-button{
position: absolute;
width: 80px;
left: 450px;
}
#plus-symbol{
position: absolute;
color: white;
top: -28px;
left: 175.5px;
}
#assignment-object-render{
background-color: floralwhite;
padding: 20px;
padding-bottom: 50px;
font-size: 10px;
text-align: center;
}
.object-render{
background-color: floralwhite;
padding: 20px;
font-size: 10px;
text-align: center;
width: 62px;
word-wrap: break-word;
overflow-y: auto;
height: 55px;
}
.object-render-assignments{
background-color: floralwhite;
padding: 20px;
font-size: 10px;
text-align: center;
}
#tasks-rendering{
top: 210px;
}
#members-rendering{
top: 210px;
right: 0px;
}
#assignments-rendering{
bottom: 20px;
width: 760px;
height: 280px;
}
.rendering{
position: absolute;
background-color: antiquewhite;
font-family: sans-serif;
padding: 20px;
width: 350px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-row-gap: 20px;
grid-column-gap: 20px;
overflow: auto;
}
.membersDiv{
height: 70px;
width: 200px;
background-color: lightgray;
overflow-y: scroll;
}
这是css代码。 `
-
上一篇
python - within it will not work. This leads to the slightly more cumbersome version, where one lookbehind is used to match the length = 2 operators, and one is used to match the length = 1 operators.
我想用python在regex中提取关系运算符(>,<,>=,<=,!=,=...
-
下一篇
oracle - 选中的项目,要打印出复选框
我有一个带有子数据的条目,这里是带有子项目的检查按钮。如果我选中了这些项目,那么选中的项目应该被打印...