JQuery Sortable -- JQuery



홈페이지의 메인화면에 요약된 통계들이 자리하고 있었는데, JQuery의 Sortable을 이용하여 재배치가 가능하게 할 일이 있어 정리해둔다. JQuery가 막강하다는 것을 다시 한번 느꼈다.

<style>
.column {  float: left; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { cursor: pointer; margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon {  float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 295px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>


<script type="text/javascript">
$(function() {
   $(".column").sortable({
       update: function(event, ui) {
            // $(".column").sortable("serialize") or $(".column").sortable("toArray")로 재배치된 
            // 순서를 알 수 있다고 하는데, 전체적인 재배치순서가 나오지 않아서 아래처럼 수정했다.
            
            var ids = [];
            var arrtag = $("div");
    
            for(i=0; i<arrtag.length; i++) {
                var name= $(arrtag[i]).attr("name");
     
                if(name == "order")
                    ids.push(arrtag[i].id);
            }

         
            $.post("ordering.jsp", "ids=" + ids, function(response) {   });

       },
       opacity: 0.7,
       connectWith: ".column"
   });
  
   $(".portlet").addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
                   .find(".portlet-header")
                   .addClass("ui-widget-header ui-corner-all")
                   .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
                   .end()
                   .find(".portlet-content");
  
   $(".portlet-header .ui-icon").click(function() {
       $(this).toggleClass("ui-icon-minusthick").toggleClass( "ui-icon-plusthick");
       $(this).parents(".portlet:first" ).find(".portlet-content").toggle();
   });
  
   $(".column").disableSelection();
});
</script>

<div class="column">
    <div id="1" name="order" class="portlet">
        <div class="portlet-header">제목1</div>
        <div class="portlet-content">본문1</div>
    </div>
</div>

<div class="column">
    <div id="2" name="order" class="portlet">
        <div class="portlet-header">제목2</div>
        <div class="portlet-content">본문2</div>
    </div>
</div>

예제에서는 column 클래스를 지정한 레이어 단위로 움직인다.


덧글

  • Jackie 2012/09/06 15:45 # 삭제 답글

    특명 하루에 한번 놀다가기!

    업데이트가 상당히 많아졌네요 ㅎㅎ

    재밌는거 많이 하시는거 보니 부러워요 흑 ㅠ
  • 어린왕자 2012/09/07 10:26 # 답글

    ㅋㅋㅋ.
    님도 열심히 하삼~
  • jqm 2012/09/20 18:06 # 삭제 답글

    혹시. listview 에서 sortable 사용해서 순서를 변경한걸 저장 or 배열로 가져올수 있는 방법을 알수있을까요??
  • 어린왕자 2012/09/20 18:14 # 답글

    $(".column").sortable("serialize") or $(".column").sortable("toArray")로 알 수 있는데요. 모든 레이어의 번호가 나오지 않아서 저는 위의 글(빨간색)대로 구현했어요.
  • 어린왕자 2012/09/20 18:15 # 답글

    참고로 var order = $(".column").sortable("serialize") or $(".column").sortable("toArray"); 하시면 1,3,2 같은 식으로 나오기는 해요. 그런데 1,3,2,4,5를 원하는데 변경한 1,3,2만 나온다는 게 문제죠.
  • jqm 2012/09/21 13:13 # 삭제 답글

    소스 보고 참고해서 해결했어요~~ 고맙습니다~~
  • 어린왕자 2012/09/23 20:35 # 답글

    도움되셨다니 다행이네요 ㅎ
  • jqm 2012/09/27 10:56 # 삭제 답글

    죄송한데 한가지만 더 물어봐도될까요.

    sortable 로 드래그 앤 드랍 기능을 구현했는데요.
    이걸 모바일에서 실행 시키면 드래그 드랍이 안되는데 모바일에선 지원안되나요??

    아이폰 웹브라우져에서 실행시켰을때 안되네요.
  • 어린왕자 2012/09/27 10:58 # 답글

    글쎄요. 저도 이쪽은 한지 얼마 안되서 잘 모르겠어요. 그런데 jquery인데 되는게 정상 아닐까요? 표준일텐데...
댓글 입력 영역