您现在的位置是：首页 > 知识 > 正文

知识

javascript - 我已经通过模板字面创建了任务，并希望将名称拖放到我想要的任务中。

admin2022-11-07知识23

`
<!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代码。 `

知识

javascript - 我已经通过模板字面创建了任务，并希望将名称拖放到我想要的任务中。

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.

oracle - 选中的项目，要打印出复选框

相关文章