어린왕자와 여우

홈페이지의 메인화면에 요약된 통계들이 자리하고 있었는데, 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 클래스를 지정한 레이어 단위로 움직인다.