jQuery Sortable Sample

 

 

기존 프로젝트들 중에서 화면 UI를 개발함에 있어서 2개의 Multiple selectbox를 이용하여 

 

사용자 리스트를 이동하는 기능을 개발하는 경우들이 종종 있어 해당 sample 을 만들었습니다. ( 모달창에 두개의 selectbox를 이용하여 동적 객체형으로 개발하는 방향이 있어 sample을 만듬)

 

jQuery Soartable이라는 내용은 https://jqueryui.com/sortable/ 페이지를 들어가면 기본 사용 방법 및 사용 내역에 대해서 확인이 가능합니다.

 

실제 UI 화면은 아래와 같으며,

 

 

왼쪽 box와 오른쪽 box에 대해서 drag & drop 처리가 가능하며, 사용자가 의도한 방향 및 위치로 이동이 가능합니다 .

 

get data test in right 버튼의 의미는 오른쪽 Box에 들어있는 객체에 한하여, text / value 를 가져와 뿌려주도록 처리 하였습니다.

 

참고 소스는 첨부합니다.

jQuerySortableSample.zip