问题描述
我是 JavaScript 初学者。我按照教程创建了一个 todolist。 现在我想通过 todolist 项目对 div 进行排序。拖放。
我用 js 库 sortable.js 尝试过它，但我现在不知道为什么它不起作用。我不能拖动 div。我相信这是一个简单的修复。但正如我所说，我对 js 很陌生，所以如果有人能告诉我这个问题，那就太好了。谢谢！
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link rel="stylesheet" href="./style.css">
<title>Todo List</title>
</head>
<body>
<header>
<h1>Todo Liste</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-button" type="submit">
<i class="fas fa-plus-square"></i>
</button>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">Alle</option>
<option value="completed">Erledigt</option>
<option value="uncompleted">Nicht Erledigt</option>
</select>
</div>
</form>
<div class="todo-container">
<ul id="todocontainer" class="todo-list"></ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
<script>
Sortable.create(todocontainer,{ /* options */ });
</script>
<script src="./app.js"></script>
</body>
</html>
还有我的 app.js：
const todoInput = document.querySelector('.todo-input');
const todobutton = document.querySelector('.todo-button');
const todoList = document.querySelector('.todo-list');
const filterOption = document.querySelector('.filter-todo');
//Event Listeners
document.addEventListener('DOMContentLoaded',getTodos);
todobutton.addEventListener('click',addTodo)
todoList.addEventListener('click',deleteCheck);
filterOption.addEventListener('click',filterTodo);
//Functions
function addTodo(event) {
//Verhindere Submit / reload
event.preventDefault();
//Div generieren
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//li generieren
const newTodo = document.createElement('li');
//Text einfügen
newTodo.innerText = todoInput.value;
//Style css einfügen
newTodo.classList.add('todo-item');
//li in Div rein
todoDiv.appendChild(newTodo);
//checkmark Button
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//Trash Button
const trashButton = document.createElement('button');
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//Todo speichern
saveLocalTodos(todoInput.value);
//Append to List
todoList.appendChild(todoDiv);
//Clear input value
todoInput.value = "";
}
function deleteCheck(e) {
const item = e.target;
//Todo löschen
if(item.classList[0] === "trash-btn") {
//Hocharbeiten zu parent
const todo = item.parentElement;
todo.classList.add("fall");
removeLocalTodos(todo);
//Warte bis die Animation fertig ist
todo.addEventListener('transitionend',function() {
todo.remove();
});
}
if(item.classList[0] === "complete-btn") {
const todo = item.parentElement;
todo.classList.toggle("completed");
}
}
function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function(todo) {
switch(e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if(todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if(!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
}
});
}
function saveLocalTodos(todo) {
//Check ob es schon Einträge gibt
let todos;
if(localStorage.getItem('todos') === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem('todos'));
}
todos.push(todo);
localStorage.setItem('todos',JSON.stringify(todos));
}
function getTodos() {
let todos;
if(localStorage.getItem('todos') === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem('todos'));
}
todos.forEach(function(todo){
//Div generieren
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//li generieren
const newTodo = document.createElement('li');
//Text einfügen
newTodo.innerText = todo;
//Style css einfügen
newTodo.classList.add('todo-item');
//li in Div rein
todoDiv.appendChild(newTodo);
//checkmark Button
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//Trash Button
const trashButton = document.createElement('button');
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//Append to List
todoList.appendChild(todoDiv);
});
}
function removeLocalTodos(todo) {
//Check ob es schon Einträge gibt
let todos;
if(localStorage.getItem('todos') === null) {
todos = [];
} else {
todos = JSON.parse(localStorage.getItem('todos'));
}
//Finde den Index von dem Todo indem man das Child aufruft
const todoIndex = todo.children[0].innerText;
//Von wo willst du entfernen? Bis wo? -> 1
todos.splice(todos.indexOf(todoIndex),1);
localStorage.setItem("todos",JSON.stringify(todos));
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）