드래그 가능한 여러 요소

드래그 가능한 여러 요소

1. 질문(문제점):

Spring으로 Task Manager를 만들고 있으며 작업 생성의 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가 아니라 모든 언어 또는 프레임 워크 일 수 있습니다.

2. 해결방안:

동일한 ID가 "draggable"인 여러 작업 요소를 생성합니다. 따라서 jquery는 첫 번째 항목을 선택합니다 (자세한 내용은이 답변 참조 https://stackoverflow.com/a/8498617/12378936 ).

id 속성을 제거하고 js 부분의 요소 선택기를 작업 클래스로 바꾸는 것이 좋습니다.

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

65690569