Drag and drop на несколько div

Question

Делаю приложение task manager на Java, и решил сделать так, чтобы задания можно было перетаскивать влево-вправо.

...
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
            $( "#draggable" ).draggable();
        } );
    </script>
</head>
<body>

<h2>Tasks</h2>
<button><a href="/task-create" >Create new task</a></button>

<div class="main-container" >
    <div th:each="task:${task}" class="task " id="draggable">
    <div class="top-text-div">
        <p th:text="${task.title}"  class="top-text title"  ></p>
        <button  class="button-edit"><a th:href="@{task-update/{id}(id=${task.id})}" >Edit</a></button>
        <button  class="button-delete"><a th:href="@{task-delete/{id}(id=${task.id})}" >Delete</a></button>
        <p th:text="${task.status}"  class="status"></p>
        <p th:text="${task.expired}"   class="expired"></p>
    </div>
        <p th:text="${task.text}" class="text"></p><br>

    </div>
</div>
...

При нажатии create task я создаю задание(стандартная реализация crud в спринге ). Я нашёл простое решение с jquery и я могу двигать созданное задание(при старте программы заданий нет), но только самое первое созданное. Как мне сделать так, чтобы я мог каждое задание передвигать? Спасибо ( если что - фронт только начинаю учить)

Answer 1

Можно завести переменную-счетчик, и каждой задаче выдать новый id, сразу после создания сделать её draggable через этот id.

let count = 0;

for (let i = 0; i < 10; i++) create_task();

function create_task() {
  count++;

  // Создане какого-то блока.
  let box = '<div class="task" id="draggable-' + count + '"></div>'
  document.body.insertAdjacentHTML("beforeEnd", box);

  $("#draggable-" + count).draggable();
}

.task {
  position: absolute;
  width: 80px;
  height: 80px;
  background: #fff;
  box-shadow: 1px 1px 5px #000;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Чтобы не считать id, такие вещи обычно делают через «Делегирование событий», но https://api.jqueryui.com/draggable/ - у них в документации кажется нет такой возможности.

БЛОГ НА HUSL

Drag and drop на несколько div

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