多个可拖动元素答案

【问题标题】：Multiple draggable elements多个可拖动元素
【发布时间】：2021-01-13 06:09:51
【问题描述】：

我正在使用 Spring 制作任务管理器，并且我有任务创建的 CRUD 实现：

    <form action="#" th:action="@{/task-create}"
      th:object="${task}" method="post">
    <input type="text" th:field="*{title}" placeholder=" title" > <br>
    <input type="text" th:field="*{text}" placeholder=" text" > <br>

 
    <input type="submit" id="submit" value="create task" >

</form>

这是我的任务框的代码：

<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.date}" class="top-text date "></p>
            <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>

我正在寻找一种方法让我的所有新任务都可以拖动。我找到了 jquery 的解决方案

<script>
     $(function () {
            $("#draggable").draggable();
        });
    </script>

但它只适用于一个元素。我怎样才能使多个元素可拖动？不完全是 jquery，它可以是任何语言或框架。

【问题讨论】：

标签： javascript java html spring thymeleaf

【解决方案1】：

您创建多个具有相同“可拖动”ID 的任务元素。因此 jquery 选择第一个（有关详细信息，请参阅此答案https://stackoverflow.com/a/8498617/12378936）。

我会建议删除 id 属性并将 js 部分中的元素选择器替换为任务类：

$(function () { $(".task").draggable(); });

【讨论】：