Создание перетаскиваемых элементов на странице HTML с использованием JavaScript - PullRequest
Новая
       2

Создание перетаскиваемых элементов на странице HTML с использованием JavaScript

0 голосов
/ 19 апреля 2020

В настоящее время я изучаю JavaScript и пытаюсь создать прототип Системы управления задачами. Часть этой системы делит задачу на три разные категории, и я хочу, чтобы пользователь мог перетаскивать задачу между категориями в зависимости от того, где на временной шкале задачи они находятся. Это HTML: 

 <div class="col-2" ondragover='onDragOver(event);' ondrop='onDrop(event);'>
    <h3 class="column_title">Not started</h3>
    <div class="task_node" draggable="true" ondragstart='onDragStart(event);'>
    </div
 </div>
 </div>
 <div class="col-2" ondragover='onDragOver(event);' ondrop='onDrop(event);'>
    <h3 class="column_title">On-going</h3>
 </div>

Я сделал div-класс task_node перетаскиваемым. Затем я создал событие ondragstart, которое использует передачу данных для сохранения всего содержимого внутри перетаскиваемого события. Код для этого в JavaScript: 

function onDragStart(event) {
 event
  .dataTransfer
  .setData('text/plain', event.target.id);
}

Затем я создал функцию для отключения настроек браузера по умолчанию, которая называется onDragOver. 

function onDragOver(event) {
 event.preventDefault();
}

Наконец, я создал функцию удаления, которая получает идентификатор объекта, созданного в первой функции. Извлекает данные объекта и затем добавляет объект в зону сброса перед очисткой события. 

function onDrop(event) {
 const id = event
  .dataTransfer
  .getData('text');

  const draggableElement = document.getElementById(id);
  const dropzone = event.target;

  dropzone.appendChild(draggableElement);

  event
   .dataTransfer
   .clearData();
}

Однако, похоже, это не работает.

...