0

Пытаюсь сделать простенький список задач в котором выполненная задача перетаскивается из окна "что нужно сделать" в окно "выполнено". В целом список работает. Но есть две нерешенные задачи.

Первое - элемент перетягивается в правое окно даже при минимальном смещении. Как можно сделать так чтобы элемент "приземлялся" в правую область только после того как полностью окажется в правом поле - див с классом "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>

введите сюда описание изображения

1

1 ответ 1

0

Первое

Вы неправильно используете html draggable, обрабатываете только 2 события dragStart и dragEnd

item.addEventListener('dragstart', function (event) {
    item.classList.add('selected');
  });

item.addEventListener('dragend', function (event) {
    // if (event.target == done)
    doneItems.appendChild(item);
  });

Смотрите пример из MDN документации по html dnd

Как можно сделать так чтобы элемент "приземлялся" в правую область только после того как полностью окажется в правом поле

DragImage (картинка, которая следует за курсором) в html dnd крайне плохо контролируется, его стиль будет отличаться в зависимости от ОС и браузера. Из-за чего условие "полностью окажется" вычисляется крайне сложно. Примеры поведения есть в этом вопросе

Кроме этого, в html dnd событие Drag Enter выполняется, когда КУРСОР заходит на дроп элемент. См. пример ниже

document.querySelector('.drag').ondragstart = () => console.log('Drag Start')
document.querySelector('.drop').ondragenter = () => console.log('Draggable Element Enter')
.drag {
  background: green;
  height: 100px;
  width: 100px;
}

.drop {
  background: pink;
  height: 300px;
  width: 300px;
}

body {
  display: flex;
  justify-content: space-between;
}
<div class="drag" draggable="true">drag</div>
<div class="drop">drop</div>

Если же вы хотите сделать именно при полном заходе драг элемента на дроп, то вам, скорей всего, придется использовать не html dnd , а MoseEvent dnd с вычислением положения элементов драга и дропа через смещение и координаты эелементов, для этого подойдет getBoundingClientRect

Вторая задача

Вы создаете новые элементы, но не вешаете на них обработчики событий

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');
  //Где обработчик событий на новом элементе? dragStart|dragEnd ?
  
  //taskItem.addEventListener('dragstart', ()=>/*do something*/) 
  //taskItem.addEventListener('dragend', ()=>/*do something*/) 
  
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.