jquery-ui를 사용해서 구현해 보았다.
https://jqueryui.com/sortable/#default
Sortable | jQuery UI
Sortable Reorder elements in a list or grid using the mouse. Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable prope
jqueryui.com
위 사이트를 들어가면 예제 소스를 볼 수 있다.
view source 버튼을 누르면 소스가 펼쳐진다.
jquery-ui.js은 필수로 추가해 주도록 한다.
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
리스트를 만들고,
ul 태그에 id를 설정한 다음,
그 아이디에 sortable() 함수를 추가하면
기본적인 작업이 끝난다.
나는 리스트가 변경됨을 감지(update) 한 후
디비에 값을 저장하기 위해서 update 속성에 함수를 추가하였다.
이 함수에 ajax로 데이터를 디비에 저장하는 로직을 추가하면 된다.
revert: true 옵션을 추가하면
좀 더 부드럽게 리스트가 이동하게 된다.
jquery-ui.js 사용하면 드래그 앤 드롭 리스트를 편하게 구현할 수 있다.
SortableJS를 사용해서 구현하는 방법도 있으니 참고하도록 하자.
https://sortablejs.github.io/Sortable/
SortableJS
Thresholds Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue. <!-- --> new Sortable(example7, { swapThre
sortablejs.github.io
'JS' 카테고리의 다른 글
| 무한 스크롤 구현 (2) | 2023.11.13 |
|---|---|
| 아이폰 모바일 웹 파일 첨부 (0) | 2023.08.17 |
| img onerror 두 번 처리하기 (0) | 2023.03.09 |
댓글