jquery Drag & Drop 과 정렬 이벤트

진짜 별거 아닌기능인데 이렇게 까지 해줘야 하나 생각도 해봤는데

한번 만들어놓으면 계속 쓸것 같아서 남겨놓는다.

 

소스 복사해서 HTML 로 만들어서 실행하면됨

 

순수한 javascript가 대세라지만 난 아직 jquery가 너무 너무 편하다.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
 
<style>
    frmStyle {    width:100%;}
    .frmStyle th {
        border-top:1px solid #dae0fd;
    }
    .frmStyle tr:last-child th  {
        border-bottom:1px solid #dae0fd;
    }
    .frmStyle td {
        border-top:1px solid #eee;
    }
    .frmStyle tr:last-child td {
        border-bottom:1px solid #eee;
    }
    .frmStyle th {
        padding:0 15px;
        height:36px;
        line-height:24px;
        white-space:nowrap;
        text-align:center;
        background:#e9ecfb;
    }
    .frmStyle td {
        padding:0 20px 0 10px;
        line-height:36px;
        position:relative;
    }
</style>
<form style="max-height:750px; width:1200px; overflow:auto; margin-left:50px;" id="popSortable" class="ui-sortable">
    <table class="frmStyle ui-sortable-handle" style="margin-bottom:30px">
        <colgroup><col style="width:10%;">
            <col style="width:55%;"><col>
        </colgroup>
        <thead>
            <tr>
                <th>순서1</th>
                    <td>
                        <input name="dispOrd" type="text" class="w80" placeholder="전시순서" value="3" style="margin-left:5px; text-align:center" onblur="fnSortDispOrd();">
                    </td>
                </tr>
            </thead>
    </table>
    <table class="frmStyle ui-sortable-handle" style="margin-bottom:30px">
        <colgroup><col style="width:10%;">
            <col style="width:55%;"><col>
        </colgroup>
        <thead>
            <tr>
                <th>순서2</th>
                    <td>
                        <input name="dispOrd" type="text" class="w80" placeholder="전시순서" value="3" style="margin-left:5px; text-align:center" onblur="fnSortDispOrd();">
                    </td>
                </tr>
            </thead>
    </table>
    <table class="frmStyle ui-sortable-handle" style="margin-bottom:30px">
        <colgroup><col style="width:10%;">
            <col style="width:55%;"><col>
        </colgroup>
        <thead>
            <tr>
                <th>순서3</th>
                    <td>
                        <input name="dispOrd" type="text" class="w80" placeholder="전시순서" value="3" style="margin-left:5px; text-align:center" onblur="fnSortDispOrd();">
                    </td>
                </tr>
            </thead>
    </table>
</form>
 
<script>
 
    $("#popSortable").sortable({
        stop:function(event,ui){
            var sortNum = 1;
            $("#popSortable table").each(function(){
                $(this).find("[name=dispOrd]").val(sortNum);
                sortNum = sortNum+1;
            });
        }
    });
 
    let fnSortDispOrd = function(){
        let datas= new Array();
        for(let i=0; i<$("#popSortable table").length; i++){
            datas[i]  = $("#popSortable table")[i];
        }
 
        // sort by cell[index]
        datas.sort(compareCells);
        for(let i=0; i<$("#popSortable table").length; i++){
            $("#popSortable").prepend(datas[i]);
        }
    };
 
 
    let compareCells = function(a,b) {
        let aVal = a.rows[0].cells[1].children.dispOrd.value;
        let bVal = b.rows[0].cells[1].children.dispOrd.value;
 
        aVal = aVal.replace(/\,/g, '');
        bVal = bVal.replace(/\,/g, '');
 
        let temp = aVal;
        aVal = bVal;
        bVal = temp;
 
        if(aVal.match(/^[0-9]+$/) && bVal.match(/^[0-9]+$/)){
            return parseFloat(aVal) - parseFloat(bVal);
        }
        else{
            if (aVal < bVal){
                return -1;
            }else if (aVal > bVal){
                return 1;
            }else{
                return 0;
            }
        }
    }
</script>