jQuery UI sortable을 사용한 드래그하여 목록 순서 변경, handle 옵션으로 특정 버튼만 적용할 때 유의사항

jQuery-ui sortable()

https://api.jqueryui.com/sortable/

jQuery-ui의 sortable 함수는 특정 element 하위 목록을 드래그하여 정렬할 수 있게 한다. 적용 가능한 태그는 li, div 등 크게 상관없는 것 같다.

그림은 카카오지도 길찾기 영역이다. 클라이언트는 실내지도의 길찾기 기능을 구현해 달라고 했다. 퍼블에서 UI를 만들어 줬는데, 그림의 초록색 부분이 클릭하여 드래그하는 버튼 영역이다. 그런데 특정 element만 sortable 핸들러로 사용할 수 있는 handle 옵션을 아무리 넣어봐도 적용되지 않는다. 알고보니 기본적으로 클릭 시 이벤트가 있는 button, input(클릭 시 커서) 등은 sortable의 클릭 이벤트가 preventDefault 된다.

sortable 특정 버튼만 적용하기

$('#content').sortable({
  handle: '.move'
});

이렇게 하면 버튼을 아무리 클릭해도 적용되지 않는다.

$('#content').sortable({
  handle: '.move',
  cancel: '' // <- cancel을 추가해줘야 된다.
});

자세한 내용은 링크를 참조.

https://api.jqueryui.com/sortable/#option-cancel