jQueryUI 로 Drag&Drop
메뉴 개발하기
2016/7/1 개발일기
이번에 시스템을 개편하면서, 등록된 메뉴 소팅 변경 기능을 개발했다. 기존 기능은 소팅 순서를 일일이 입력하는 방식이었는데, 이번에 신규 개발하는 김에 아예 사용성이 편리한 Drag&Drop으로 변경하자고 마음 먹었다. 먼저 Drag&Drop 라이브러리들을 찾아보다가, 적당히 메뉴 정도에 적용하기 좋은 라이브러리를 찾았다.
jQuery UI sortable 메소드다.
공식홈페이지 : https://jqueryui.com/sortable/
위에 나와있는 예제는 매우 간단하지만, 실제 적용하니 작동이 아예 되지 않았다. 조금 구글링을 해보니 스타일의 문제로 메뉴 위에 여러겹 div를 감싸둔게 문제였다. 직계 자손이 아니어서 태그명으로 안 먹는 듯 했다. 그리하여 아래와 같이 설정해주었다.
$('.parentDiv').sortable(
{
item:'> .childDiv > .item'
}
)
sortable을 적용하고 싶은 최상위 Div에 sortable 을 입력하고, 그 후 실제 drag&drop 되는 아이템은 item: 에 위와 같이 별도로 입력해주었다. 정상 작동 확인 완료. 이제는 drag&drop 을 했을 때 sorting index를 받아와 DB에 넣어주어야 한다. drop 액션을 감지하는 stop 옵션이 있어, stop 옵션에 이후 처리를 입력하면 된다.
$('.parentDiv').sortable(
{
item:'> .childDiv > .item',
stop: function(event, ui) {
$('.item').each(function(i,item) {
$(item).index(); //해당 item의 index 값을 리턴
$(item).attr("id"); //해당 item의 ID값 리턴
}
}
}
)
내 경우에는 sortable 에서 리턴하는 element index가 정확히 맞지 않았다. div가 여러개로 분리되어 있었고, 그런데다가 div마다 subTitle 이 있어서 element 값이 3..4..5..6..8..9..10 이런식으로 카운트 되었다. (누락된 1,2,7번째 element는 단순 text임) 그래서 별도로 index 변수를 만들어 반복문 돌때마다 index를 1씩 더해 카운트하는 방식으로 index를 구했다. (어차피 순서대로 넘어옴)
$('.parentDiv').sortable(
{
item:'> .childDiv > .item',
stop: function(event, ui) {
var index = 0;
$('.item').each(function(i,item) {
index ++;
//이후 처리
}
}
}
)
그 이후에는 index와 id를 json Object 형태로 매칭하여 Ajax로 보냈다.
이렇게 메뉴 드래그앤드랍 Sorting 기능 완성 :-)
