Не могу настроить drag and drop

Question

Проблема такая - делаю приложение на Spring, менеджер задач, и мне нужно, чтобы я мог задачу перетянуть в колонку. Делаю всё по схеме, но на моём коде почему-то не получается (если копипастю шаблонный код - работает.) Если что, я не силён в фронте, поэтому просьба сильно не пинать - знаний мало и делаю "черновой" проект, главное - чтобы был функционал.

Еще добавлю, что сама задача как бы тянется, но в колонке не остается, когда отпускаю кнопку мыши.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Main Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/column.css">
    <link rel="stylesheet" type="text/css" href="css/task.css">

    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>

<th:block th:include="/menu"></th:block>

<div  th:switch="${col}"     ondrop="drop(event)" ondragover="allowDrop(event)"  >

        <table style="background-color: lightgrey; "  >
            <tbody>
          <tr   draggable="true"  class="tr-column" th:each="col : ${col}">
                <td  class="wrapper" th:text="${col.name}"></td>
                <td style="width: auto"><a th:href="@{col_update/{id}(id=${col.id})}" class="btn btn-primary">Edit</a></td>
                <td style="width: auto"><a th:href="@{col_delete/{id}(id=${col.id})}" class="btn btn-danger">Delete</a></td>
                <td><a href="/create_task" class="btn btn-primary">Create new task</a></td>

            </tr>
            </tbody>
        </table>
</div>
<div   th:each="task : ${task}">
    <div >
        <table><tbody><tr><td th:text="${task.name}"></td></tr></tbody></table>
    </div>
    <div draggable="true" ondragstart="drag(event)"  >
        <table><tbody><tr><td th:text="${task.description}"></td></tr></tbody></table>
            <table><tbody><tr> <td th:text="${task.created}"></td></tr></tbody></table>
        <table><tbody><tr>  <td style="width: auto"><a th:href="@{task_update/{id}(id=${task.id})}" class="btn btn-primary">Edit</a></td>
      <td style="width: auto"><a th:href="@{task_delete/{id}(id=${task.id})}" class="btn btn-danger">Delete</a></td> </tr></tbody></table>

    </div>
</div>
</body>
</html>

БЛОГ НА HUSL

Не могу настроить drag and drop

Ответы (0 шт):