• 이 플러그인은 엘리먼트를 드래그&드롭을 가능하게 해준다.
• 특히 목록이나 테이블의 블럭순서를 변경할 수 있는데에 굉장히 유용한 jQuery플러그인이다.
• 예제 URL: http://goo.gl/E3Asl
• 다운로드: http://dragsort.codeplex.com
• 좀더 자세한 내용과 옵션에 관한 부분은 다운로드 url에 들어가서 참고하길 바란다.
• 현재 버전까지는 모바일 터치로 드래그는 불가능하다. 업데이트로 지원이 될지는 미지수!

기본샘플

먼저 jQuery와 플러그인을 로드한다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dragsort-0.5.1.min.js"></script>

드래그에 사용되는 목록형 엘리먼트를 만든다.

<ul id="drag1">
  <li>bread</li>
  <li>vegetables</li>
  <li>meat</li>
  <li>milk</li>
  <li>butter</li>
  <li>ice cream</li>
</ul>

엘리먼트에 플러그인을 적용시킨다.

$('#drag1').dragsort();

옵션을 적용한 샘플

추가옵션 삽입샘플

$('#drag1').dragsort({
    dragSelector : 'li'
    ,dragEnd : function() {}
    ,dragBetween : false
    ,placeHolderTemplate : '<li></li>'
});

옵션설명

• dragSelector : 드래그되는 엘리먼트를 선택한다. jQuery Selector형식으로 선택할 수 있다.(li.drag)
• dragEnd : 엘리먼트가 드롭이되면 이 메서드가 실행된다.
• dragBetween : 이 옵션을 true로 변경하면 드래그하는 엘리먼트가 부모 엘리먼트 외부로 옮길 수 있다. 다른 dragsort그룹으로 엘리먼트를 옮길 수 있게된다.
• placeHolderTemplate : 드래그되고 있을때 엘리먼트가 붙게되는 위치를 알려주는 영역을 별도의 엘리먼트를 삽입하여 표시한다. 주변 엘리먼트와 맞는 엘리먼트와 속성을 사용하며 점선이나 배경색을 적용시켜 사용한다.