위 리스트 형태를 드래그 드랍을 이용하여 순서를 변경할 수 있다.

ul 과 li 태그는 그대로 사용하는 것이 무방하다. ^.^

//Drag Drop 순서 바꾸기를 위한 태그

$irDataHtml .= '<div style="display:none;"><input class="disp-order" data-id="'.$irData['no'].'" data-order="'.$irDispIdx.'" data-reorder="'.$irDispIdx.'" value="'.$irData['no'].'-'.$irDispIdx.'"></div>';

실제 DB에 order를 저장하고 다음에는 Query시 Order ASC 형태로 쿼리하면 된다.

<script>
// Drag Drop 순서 바꾸기
    $(function (){
$('#ir-data-list').sortable({
stop: function (event, ui) {
reorder();
            }
        });
        $('#ir-data-list').disableSelection();
    });

    function reorder() {
$("#ir-data-list .ir-data-wrapper").each(function(i, box) {
var li_target = $(box).find(".disp-order");
            var li_order = li_target.data('id') + '=' + (i+1);
            li_target.data('reorder',(i+1));
            li_target.val(li_order);
            $('[data-action="reorderUpdate"]').css('display','block');
        });
    }

$('[data-action="reorderUpdate"]').on('click', function (e) {

var orderUpdateInfo = '';
        var li_target ,li_order;
        $("#ir-data-list .disp-order").each(function() {
            li_target = $(this);
            li_order = li_target.data('order');
            if (li_order != li_target.data('reorder')) {
                orderUpdateInfo += (li_target.val() + ',');
            }
        });

        alert(orderUpdateInfo);

        var sO = new Object();
        sO.cmd = 'ir.list.order.update';

        sO.orderUpdateInfo     = orderUpdateInfo;
        console.log(sO);
        var url = "<?php echo site_url('IpsAjax/apiCall'); ?>";
        ___ajax(url,sO,0,null);
    });
</script>