Пытаюсь сделать простенький список задач в котором выполненная задача перетаскивается из окна "что нужно сделать" в окно "выполнено". В целом список работает. Но есть две нерешенные задачи.
Первое - элемент перетягивается в правое окно даже при минимальном смещении. Как можно сделать так чтобы элемент "приземлялся" в правую область только после того как полностью окажется в правом поле - див с классом "done-tasks". Изучал event.target но не понял как его тут применить. Хотелось бы сделать через условие. То есть для слушателя 'dragend' если элемент полностью зашёл в правое поле - добавляем его туда, если нет - элемент возвращается обратно. Как возможно реализовать?
Вторая задача. Не получается переносить в правое окно НОВЫЕ элементы, добавленные через форму. Только те, которые уже есть в разметке. Почему так может быть? Из-за того что не добавлен localstorage или же что-то упустил в коде?
let taskItems = document.querySelector('.tasks-items');
let listItem = document.querySelector('.list-item');
let taskValue = document.getElementById('task-value');
let button = document.getElementById('button');
// let newItem = document.createElement('li');
button.addEventListener('click', function (event) {
event.preventDefault();
let newItem = document.createElement('li');
newItem.textContent = taskValue.value;
// taskValue.value = '';
taskItems.appendChild(newItem);
newItem.classList.add('list-item');
});
let allItems = document.querySelectorAll('.list-item');
let done = document.querySelector('.done-tasks');
let doneItems = document.querySelector('.done-items');
let doneList = document.querySelector('.done-list');
for (let item of allItems) {
item.draggable = true;
item.addEventListener('dragstart', function (event) {
item.classList.add('selected');
});
item.addEventListener('dragend', function (event) {
// if (event.target == done)
doneItems.appendChild(item);
});
}
main {
display: flex;
width: 800px;
min-height: 300px;
height: auto;
margin: auto;
border: cornflowerblue 3px solid;
justify-content: center;
margin-top: 100px;
}
h1 {
text-transform: uppercase;
color: chocolate;
margin: 20px 0px;
text-align: center;
}
.tasks,
.done-tasks {
text-align: center;
width: 400px;
color: black;
}
.tasks {
border-right: cornflowerblue 3px solid;
}
ul {
list-style-type: none;
}
.list-item {
font-size: 26px;
text-align: left;
background-color: red;
width: 280px;
height: 40px;
margin-bottom: 5px;
padding-left: 10px;
vertical-align: middle;
}
.done-list {
font-size: 26px;
text-align: left;
background-color: rgb(20, 173, 6);
width: 280px;
height: 40px;
margin-bottom: 5px;
padding-left: 10px;
vertical-align: middle;
}
form {
margin-top: 50px;
text-align: center;
}
.selected {
font-size: 26px;
text-align: left;
background-color: red;
width: 280px;
height: 40px;
margin-bottom: 5px;
padding-left: 10px;
vertical-align: middle;
box-shadow: 0px 0px 5px 5px yellow;
}
<main>
<div class="tasks">
<h1>What i should to do</h1>
<ul class="tasks-items">
<li class="list-item">Поспать</li>
<li class="list-item">Позавтракать</li>
<li class="list-item">Учить JavaScript</li>
<li class="list-item">Сходить в гости</li>
</ul>
</div>
<div class="done-tasks">
<h1>What i did</h1>
<ul class="done-items">
<li class="done-list">Отметить новый год</li>
<!-- <li class="done-list"></li>
<li class="done-list"></li>
<li class="done-list"></li> -->
</ul>
</div>
</main>
<form
action="file:///C:/Users/Success/Documents/VS/Список%20дел%20DragAndDrop/index.html"
method="post"
>
<input id="task-value" type="text" name="tasks" value="" />
<button id="button">Отправить задачу</button>
</form>