[jQuery] 드래그해서 정렬, 순서조정

첨부파일, 특히 에디터를 사용해서 올린 파일들의 순서를 바꾸려고 할때, 드래그 해서 바꿀 수 있다.

jquery의 sortable을 사용한다.

옵션중에 stop,start,update 등등 이 있다. 구글하면 더 나옴.

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

$(function () {

$( ".부모클래스" ).sortable({

  flow:'horizontal',

  axis: "x",

  revert: false, // Whether the sortable items should revert to their new positions using a smooth animation.

  scroll: false,

  containment: "parent",

  placeholder: "sortable-placeholder",

  cursor: "move",

  cursorAt: { left: 5 },

  sort: function(e, div) {

        $(div.placeholder).html('<img src=\'/경로1/이미지파일.png\' style=\'float:left;\' />'); // 아이템 사이 구부하는 구분자.

  },   

  change: function(event, ui) {

  //alert('change');

  },

  stop: function(e, ui) {

      //alert('stop');

  },

  update: function (event, ui) {

  var arrFileName = new Array();

  // 아이템 추출. ui.item.

  $('.자식클래스').each(function(index){

  var fileName = $(this).attr('파일명');

  arrFileName.push(fileName);

  });

  

      $.ajax({

                type:"POST",

                url:"<c:url value="/순서 변경 내용 DB에 저장"/>",

                data:{"arr_file_name" : arrFileName.toString()},

                dataType:"json",

                success: function (data) {

                    if (data.result > 0) {

                    fnAlert("순서가 변경되었습니다.");

                    }

                    else {

                        fnAlert("순서 변경 처리중 에러가 발생했습니다.\n잠시후 다시 시도해 주세요.");

                    }

                },

                error: function (e) {

                    fnAlert("순서 변경 중 에러가 발생했습니다.\n잠시후 다시 시도해 주세요.");

                }

            });         

  }

});

});

</script>

<style>

 .부모클래스{ position: relative; height:110px; } 

 .부모클래스.자식클래스 { left: 0; float:left; margin-left:2px; margin-right:2px; }

</style>

HTML단

<div class="부모클래스" >

<div class="자식클래스" id="image_0" data-fileName='파일명'>

<img src="" />

</div>

<div class="자식클래스" id="image_1" data-fileName='파일명'>

<img src="" />

</div>

.....

<div class="자식클래스" id="image_6" data-fileName='파일명'>

<img src="" />

</div>

</div>