업무 중 공통에서 사용되고 있는 JQuery Ui Sortable 함수를 사용 중에, 특정 목록이 상단에 항상 고정되어 소팅이 되지 않고 비활성화처럼 보이게끔 해야했다.
그런데 공식 API 문서에 있는 event나 method, option과 많은 검색 결과에 따라 테스트를 해보았지만, 원하는 결과물은 나오지 않았다. ㅠㅠ
특정 항목이 비활성화처럼 보여지긴 하나 화면 구성을 편집하는 부분 중 첫번째 목록이 항상 고정이 된 상태로 아래의 항목들만 소팅이 되어야 하는 구성이었다.
그리고 핸들로만 항목 이동이 이루어지게끔 디자인 되었지만, 앱 접근성 적인 부분에 있어 voiceover나 talkback에서 포커스가 이동하여 항목 순서 이동도 구현해야 했다.
그러다보니 핸들로 구현하는 부분은 셀렉터로 어떻게든 제어가 되었지만, 버튼으로 제어해야하는 부분에서 제일 처음 보여질 비활성화 항목 아래 위치한 항목 index 기준으로 위로이동 버튼을 비활성화가 필요했고, 가장 아래의 버튼의 아래로 이동 버튼을 비활성화가 필요했다.
vanilla script로 구현을 해보려고 했지만, jQuery 베이스의 라이브러리여서 인지 노드 콘솔에러로 한참 애를 먹어서, 제이쿼리 명령어들로 쉽게 해결할 수 있었다.
비활성화 할 항목에 특정 클래스를 부여하고, 소팅할 항목들을 지정할 때 :not(.ui-state-disabled)로 지정해 인덱싱을 했다.
그 이외에는 소팅 목록의 첫번째와 마지막에 위치한 항목에 클래스를 부여할 함수를 선언하여,
sortable을 선언할 때와 update 시에 함수를 콜백 해주었다.
이렇게만 하면 소팅 핸들로 소팅하는 옵션 설정은 끝이고, 특정 버튼을 클릭할 때에 클릭되어진 항목을 위 아래로 이동하게끔 클릭이벤트를 선언해주면 끝.
Leave a Reply