Drag and drop sort order with Scriptaculous

Drag and drop sort order with Scriptaculous

드래그 앤 드롭을 이용하여 아이템의 소트 순서를 변경을 지원해주는 작업을 해 보자. 드래그앤 드롭은 Adobe’s Spry라이브러리가 빠져있다. 그러나 Scriptaculous JavaScript 라이브러리의 도움으로 매우 쉽게 작업을 할 수 있다.

Scriptaculous는 Prototype Javascript Framework를 이용하고 있다. 시작을 위해서는 scriptaculous와 해당 링크된 라이브러리를 다운 받아야 한다. Prototype라이브러리를 별도로 받을 필요는 없다. 이것은 포함되어 있다.

<script language="JavaScript" src="/javascript/prototype.js"></script>
<script language="JavaScript" src="/javascript/scriptaculous.js"></script>

소트하고자 하는 아이템을 위해 리스트를 생성한다. 이러한 리스트 아이템은 DIV나 table 데이터 엘리먼트가 될 수 있다.

<ul id="sortable_list" style="cursor: move">
   <li>The first item</li>
   <li>Then the second one</li>
   <li>Of course then comes the third</li>
   <li>And finally, the fourth</li>
</ul>

그리고 JavaScript의 중요한 라인을 넣는다. 이것은 반드시 소트하기 위해서 필요한 작업이다.
<script language="JavaScript">
  Sortable.create("sortable_list");
</script>

"sortable_list"는 소트가능한 아이템의 아이디에 해당한다. 여기에는 많은 옵션을 create()메소드에 줄 수 있다. 그리고 Scriptaculous의 documentation을 보면 자세하게 모든 정보를 볼 수 있다. 아래 내용을 한번 보자.

The first item Then the second one Of course then comes the third And finally, the fourth

Click and drag these

어떻게 새로운 순서 정보를 우리가 기억할 수 있을까? 이것은 웹사이트 페이지의 순서를 정의하거나. 홈페이지의 헤드라인을 지정할 때 주로 사용된다. 소트 순서를 필요할 경우 우리는 이러한 정보가 필요하게 된다. 그러한 작업은 다음 부분과 같이 수행할 수 있다.

첫번째는 DOM메소드를 이용하여 내부 엘리먼트에 속한 노드를 찾아내는 것이다.

orderedNodes = document.getElementById("sortable_list").getElementsByTagName("li");

orderedNodes는 이제 LI 엘리먼트의 배열을 "sortable_list"엘리먼트 안에 있는 엘리먼트 리스트라는 것으로 이해하고 가져온다. 이것은 디스플레이된 순서로 보여지는 것이다. 우리는 반복문을 통해서 히든 필드의 데이터를 사용하여 서버로 폼이 서브밋 될때 전송할 수 있다. 나는 onsubmit이벤트 핸들러를 이용하여 이러한 함수 작업을 수행하도록 할 것이다.

그러나 히든 필드에 어떠한 값을 넣을까? LI 엘리먼트의 텍스트? 그것은 유용하지 못하다. 그러므로 LI엘리먼트의 recordid를 지정하는 것이 좋다.

<ul id="sortable_list">
   <li recordid="1">The first item</li>
   <li recordid="2">Then the second one</li>
   <li recordid="3">Of course then comes the third</li>
   <li recordid="4">And finally, the fourth</li>
</ul>

그리고 JavaScript루프에서 우리는 getAttribute메소드를 이용하여 recordids의 값을 이용할 수 있다. 만약 HTML이 비표준 LI attibute 때문에 건증되지 않은경우라면, 당신은 각 지정된 이름을 입력해 줄 수 있다. 다음과 같이..

이 함수는 hidden 필드에 값을 쓰는 데신에 alert()을 수행해 볼 것이다.

function getOrder() {
  var orderList = '';
  orderedNodes = document.getElementById("sortable_list").getElementsByTagName("li");
  for (var i=0;i < orderedNodes.length;i++) {
    orderList += orderedNodes[i].getAttribute('recordid') + ', ';
    }
  alert(orderList);
  }

당신은 예제의 엘리먼트의 recordids의 값을 획득할 수 있을 것이다. 그것을 당신이 소트한 순서대로 말이다.

그러한 작업을 수행하고 나서, Sortable.serialize()메소드를 찾아볼 것이다. 이것은 Scriptaculous메소드가 name[]=value쌍을 &기호로 분리된 객체값으로 소팅되도록 해준다. catch는 ID 속성속에 저장된 recordids를 가질 것이며, 특정 포맷이 필요하게 된다. "string_identifier"의 형식으로 recordid가 이용될 것이며, string부분은 무시된다.

<ul id="sortable_list">
   <li id="item_1">The first item</li>
   <li id="item_2">Then the second one</li>
   <li id="item_3">Of course then comes the third</li>
   <li id="item_4">And finally, the fourth</li>
</ul>

serialize()메소드를 반환하는 예제를 확인해 보자.

format는 PHP는 생소하게 보인다.

sortable_list[]=1&sortable_list[]=2&sortable_list[]=3&sortable_list[]=4

PHP에서는 (혹은 몇몇 다른 언어에서), sortable_list와함께, string 직접적인 URL정보와 배열값을 전송해야한다. 그러므로 값에 있는string까지 함께 보내야한다. 그리고 parse_str함수값을 이용하여 스트링을 배열값으로 변경하게 된다.

parse_str($_GET['sortorder'],$newSortorderArray);

합성을 할때, 사각형 브라켓을 주의깊게 봐야한다. 그것은 값을 전송할때 매우 유용한 방법이다. ColdFusion을 이용할때 데이터를 받을 첫번째 방법이라고 생각한다.

새로운 소트 순서에 대한 서브밋된 폼을 기다리고 싶지 않을경우 Scriptaculous는 2개의 서로다른 이벤트 핸들러를 제공하며, onChange와 onUpdate가 그것이다. 당신은 소트 순서가 변경될때마다 숨은 필드를 다시 계산할 수 있도록 하고 있으며, 이것은 AJAX를 이용하여 데이터베이스에 직접적으로 값을 저장할 수 있도록 해준다. 실제적으로 많은 기능을 더 제공해 주기도 한다. 드래그를 위해 아이템을 집거나, 드롭을 하고, 특정 클래스에 마우소를 올려 놓거나, 이동하는 경우에 효과르 추가 할 수 있다.