script.aculo.us 의 Sortable 사용

구글 개인화 홈페이지 등을 보면 박스를 이리 저리 옮길 수 있게 구성을 해 놓았다.
이것을 구현하려 script.aculo.us 의 Sortable 에 관한 예제 및 메뉴얼을 가지고 끙끙대다가
(script.aculo.us 메뉴얼 사이트를 보면 Ruby on Rails 로 구현되어 있어서 참 힘들었다.)
구글링을 통하여 예제또한 훌륭하게 도움을 받아 기록 차 이곳에도 남겨둔다.

[출처] http://blog.outsider.ne.kr/275
(크리에이티브 커먼즈 라이센스 에 의거 비영리 교육용 기록이기에 약간의 변경을 하였다.)

Sortable.create('id_of_container',[options]);

id_of_container에 드래그앤드롭을 가능하게 할 엘리먼트의 id를 주고
options에 드래그앤드롭에 대한 옵션을 JSON형태로 던져주면 바로 정렬가능한 드래그앤드롭을 사용가능하다.

1. <ul id="contailner">  
2.     <li id="dnd_1">Test 1</li>  
3.     <li id="dnd_2">Test 2</li>  
4. <ul>  
5. <script type="text/javascript">  
6.     Sortable.create("contailner");  
7. </script> <ul id="contailner">     <li id="dnd_1">Test 1</li>     <li id="dnd_2">Test 2</li> <ul> <script type="text/javascript">     Sortable.create("contailner"); </script>
   

위와같이 작성하면 dnd_1, dnd_2객체가 바로 드래그앤드롭이 가능하다. (이 얼마나 간단하단 말인가. ㅎㅎㅎ)

이 제 옵션을 보자. 자유롭게 사용하려면 옵션을 주어서 원하는 형태로 사용하여야 한다. 옵션은 Draggable과 공통적인 것도 있고 아닌것들도 있다.(아직 Script.aculo.us의 API리스트는 솔직히 좀 아쉽다.) API와 내가 테스트해본걸 바탕으로 적었지만 빠진 부분이 있을수도 있다.

tag : 여 기에 HTML태그명을 주면 해당 태그에 대해서 Sortable이 동작하게 된다. 디폴트는 li태그이고 container아래 한단계 밑까지만 동작한다. 쉽게 말해 li안에 li가 또 들어있다고 하더라도 안에 있는 li에는 드래그앤드롭이 동작하지 않는다. Block엘리먼트에만 가능하고 table같은걸 블가능하다.

only : 이 옵션을 주고 여기서 class명을 지정하면 tag에 설정한 태그명이라고 할지라도 only에서 준 class명과 맞지 않으면 드래그앤드롭이 동작하지 않는다.

overlap : 가로 리스트는 horizontal, 세로 리스트는 vertical로 설정하라는데 정확한 동작은 잘 모르겠다.

constraint : horizontal, vertical, false 3가지가 있고 드래그앤드롭의 방향을 설정한다. horizontal/vertical로 설정할 경우에는 가로/세로로만 이동하며 false나 옵션을 주지 않았을 경우에는 어떤 방향이든지 이동이 가능하다.

containment : 이곳에 container 리스트를 지정하고 이곳에 지정한 container간에는 드래그앤드롭이 가능하다.

handle : 드래그앤드롭을 할 엘리먼트에서 전체가 아닌 특정부분만을 이용해서 드래그앤드롭이 가능하도록 하고 싶을때 handle이용한다. 이곳에 id 혹은 class명을 지정하면 핸들러로 사용할 수 있다.

delay : 드래그앤드롭으로 반응할 시간을 미리세컨단위로 설정할 수 있고 기본은 0이다. 너무 민감하게 반응하지 않기를 바랄때는 delay의 숫자를 크게 지정할 수 있다.

dropOnEmpty : true로 설정하면 container가 비어있을때도 drop이 가능하다. false일 경우에는 container에 다른 드래그앤드롭객체가 있을때만 드롭이 가능하다. 기본은 false

scroll : 기본으로는 지정되어 있지 않으며 window로 설정할 경우에는 드롭할 container가 화면밖에 있을경우에 드래그객체가 화면밖으로 나가면 자동으로 스크롤한다.

scrollSensitivity : 기본은 20이고 스크롤이 되게 하기 위해서 넘어가야하는 크기를 지정한다.

scrollSpeed : 스크롤 속도이고 픽셀로 지정하면 기본은 15이다.

onChange : 콜백함수로 드래그앤드롭을 시작하는 등 객체의 위치가 변경되면 계속 발생한다.

onUpdate : 콜백함수로 드래그앤드롭을 하여 실제 순서의 변화가 생겼을때만 발생한다.

Sortable 예제

아주 간단한 예제를 만들었다. 동작과 소스코드를 보면 쉽게 이해할 수 있을꺼라고 생각한다. 최근 작업을 하면서 몇가지 주의점(?)을 발견한 거라면...

• container의 id에 언더바(_)가 들어가면 동작하지 않는다.
  
• Sortable.serialize를 사용하려면 드래그앤드롭 엘리먼트의 아이디가 언더바(_)로 이어져야 한다. 언더바 뒤쪽에 있는 문자만 표시된다.
• IE 에서는 왼쪽 콘테이너에서 오른쪽 콘테이너로 갈때 드래그엘리먼트가 컨테이너 뒤쪽으로 가는 문제가 생긴다. 드롭하기 위해서 반이상 넘어갈 경우에는 위로 올라오는데 이건 IE의 z-index버그때문에 생기는 문제로 예상되는데 정확한 해결책은 아직 찾지 못했다.

Sortable.serialize는 해당 컨테이너에 있는 드래그앤드롭객체를 순서대로 보여준다. 이것은 위치정렬을 한 후에 Ajax등을 통해서 새로 정렬한 위치를 서버에 저장할 수 있도록 하는 역할을 한다.

그 리고 예제의 소스를 보면 알겠지만 기본적으로는 드래그앤드롭을 할 때 해당위치의 공간은 표시하지만 따로 표시되지는 않는다. 이 문제를 해결하기 위해 더미 엘리먼트를 만들었다. OnChage가 발생할 때 해당 엘리먼트의 바로 앞쪽에 더미엘리먼트를 만들어서 insert한다. 이렇게 함으로써 드롭했을때 떨어질 위치가 명시적으로 보일수 있도록 하고 OnChange는 계속 발생하기 때문에 처음에 더미엘리먼트를 지우고 다시 넣어주기 때문에 다른 컨테이너로 넘어가는 순간 더미엘리먼트도 적절하게 이동된다. 깔끔한 해결책은 아닌듯 하지만 일단 동작은 한다.

+ 해외 타겟 드롭존 패치
http://tankut.googlepages.com/home

해외에서 드래그하여 리스팅 간격이 벌어지는 곳에 빈칸이 아닌 표시를 보여주는것을
원본 패치한 예가 있어서 직접 패치를 적용해보았다.
저 사이트에는 1.8.1 까지의 소스가 있는데,
난 1.8.2 를 쓰는 관계로 Sortable 가 있는 dragdrop.js 만 끄집어내어
WinMerge 라는 문서비교 프로그램에서 비교하여 패치를 적용해보았다.
결과는 성공적이었으나 너무 삽질인듯하다.