[jQuery] Drag&Drop Element 플러그인 on redgoose note

[jQuery] Drag&Drop Element 플러그인

Nest: Development Category: Javascript 2013-03-17

  • 이 플러그인은 엘리먼트를 드래그&드롭을 가능하게 해준다.
  • 특히 목록이나 테이블의 블럭순서를 변경할 수 있는데에 굉장히 유용한 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 : 드래그되고 있을때 엘리먼트가 붙게되는 위치를 알려주는 영역을 별도의 엘리먼트를 삽입하여 표시한다. 주변 엘리먼트와 맞는 엘리먼트와 속성을 사용하며 점선이나 배경색을 적용시켜 사용한다.