[jQuery] Sortable 드래그앤드랍 drag&drop 순서 변경 후 처리하기

상황

목록을 drag&drop을 이용하여 정렬 순서를 변경하는 기능을 구현할 때, 

좀 더 쉽게 jQuery-ui 라이브러리 내에 sortable 을 사용할 수 있다.

참고로 drag&drop 기능을 바닐라JS를 사용해서도 구현할 수 있다.
이전 포스팅 참고!👇

2021.12.21 - [Front/JavaScript & jQuery] - [JavaScript]

• 드래그 앤 드롭, 위 아래로 이동시키기

 

정렬 기능 구현은 어렵지 않게 했는데,
drag&drop으로 정렬을 마친 후에 다른 기능을 수행하려면 어떻게 해야할까?

 

---

적용

 

✔️정렬을 마치고 DOM의 위치가 변경되었을 때를 감지하는 이벤트를 아래와 같이 추가하면 된다.

$( ".dragTable" ).off("sortupdate").on("sortupdate", function( event, ui ) { 

    // drag&drop이후에 동작 기입
    
});

<tbody class="dragTable">
    <tr class="draggable">
        <td></td> 
        <td></td>
        <td></td>
    </tr>
</tbody>

 

📌".dragTable"의 위치에는 drag&drop 이벤트를 적용할 리스트의 상단 선택자를 기입하면 된다.

(해당 선택자를 가진 요소의 내부에 있는 하위 태그를 대상으로 Sortable을 설정하기 때문에)