Mobile drag&drop Liste
HTML
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>To Do</h2>
<div class="toDo">
<div class="task"><img src="shop.svg" alt="shop">Einkaufen</div>
<div class="task"><img src="clean.svg" alt="clean">Putzen</div>
<div class="task"><img src="cook.svg" alt="cook">Kochen</div>
</div>
<h2>Done</h2>
<div class="done"></div>
<script src="main.js"></script>
</body>
</html>
CSS
body {
font-family: sans-serif;
margin: 0;
}
h2 {
background: lightblue;
color: white;
margin: 0;
padding: 5%;
font-size: 2em;
}
.toDo,
.done {
padding: 5%;
background: lightgrey;
height: 300px;
}
.task {
padding: 5%;
margin-bottom: 5%;
background: white;
position: relative;
box-shadow: inset 0 -0.8em 0.8em rgba(0, 0, 0, 0.1);
}
img {
width: 10%;
vertical-align: middle;
margin-right: 5px;
}
JS
let task = document.querySelectorAll(".task");
let toDo = document.querySelector(".toDo");
let done = document.querySelector(".done");
let toDoPos = toDo.getBoundingClientRect();
let donePos = done.getBoundingClientRect();
task.forEach(addStart);
function addStart(elem) {
elem.addEventListener("touchstart", e => {
let startX = e.changedTouches[0].clientX;
let startY = e.changedTouches[0].clientY;
elem.addEventListener("touchend", eve => {
elem.style.zIndex = 0;
if (elem.getBoundingClientRect().top > donePos.top) {
if (!done.contains(elem)) {
done.appendChild(elem);
}
}
else if (elem.getBoundingClientRect().bottom < toDoPos.bottom) {
if (!toDo.contains(elem)) {
toDo.appendChild(elem);
}
}
elem.style.left = 0 + "px";
elem.style.top = 0 + "px";
});
elem.addEventListener("touchmove", eve => {
eve.preventDefault();
let nextX = eve.changedTouches[0].clientX;
let nextY = eve.changedTouches[0].clientY;
elem.style.left = nextX - startX + "px";
elem.style.top = nextY - startY + "px";
elem.style.zIndex = 10;
});
});
}