js플러그인, jquery 질문입니다.

js플러그인, jquery 질문입니다.

QA

js플러그인, jquery 질문입니다.

본문

jquery의 sortable을 이용하여 테이블 td를 드래그 앤 드롭으로 순서룰 변경하고

colResizable플러그인을 이용하여 td넓이를 드래그를 통해 변경하는 기능을 구현했습니다.

 

각 기능이 따로따로 동작할때는 문제가 없지만 sortable 기능이 작동 한 후에 colResizable 기능에 넓이 조정하는 지점이 문제가 생겨 제대로 동작이 되지 않는 것 같습니다.

 

td순서 변경 후 colResizable을 다시 초기화를 해도 같은 현상이 일어납니다.

관련 지식이 있으신 분들의 도움을 구합니다.

 

colResizable-1.6.min.js 링크

아래는 작성한 코드입니다.


<html>
<head>
    <script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="colResizable-1.6.min.js"></script>
    <script>
        $(function () {
            //-- table td drag and drop
            let start_index = 0;
            let stop_index = 0;
            $("#sortable").sortable({
                items: 'th',
                start: function (event, ui) {
                    start_index = ui.item.context.cellIndex;
                },
                stop: function (event, ui) {
                    stop_index = ui.item.context.cellIndex;
                    let $table = $('#sortable');
                    let $tr = $table.find("tbody").find("tr");
                    $.each($tr, function (index, el) {
                        let current_tr = $(this);
                        let $tds = current_tr.find("td");
                        let move_td = $tds.get(start_index);
                        let arrive_td = $tds.get(stop_index);
                        if (start_index > stop_index) {
                            arrive_td.before(move_td);
                        } else {
                            arrive_td.after(move_td);
                        }
                    });
                    // colResizable();
                }
            });
            $("#sortable").disableSelection();
            //-- table td drag and drop
            colResizable();
        });
        //-- table 넓이 조절
        var colResizable = function(){
            $("table").colResizable({
                liveDrag: true,
                // minWidth: 50,
                resizeMode:'overflow'
            });
        };
    </script>
    <style>
        table {border-collapse: collapse;}
        table tr th, td {border: solid 1px #AAAAAA;}
    </style>
</head>
<body>
<table id="sortable" class="tbl_head01">
    <thead>
    <tr>
        <th>th1</th>
        <th>th2</th>
        <th>th3</th>
        <th>th4</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
    </tbody>
</table>
</body>
</html>

이 질문에 댓글 쓰기 :

답변 2

아래 코드를 실행해 보면 무엇을 해야하는지 알 수있을 겁니다

핵심은 이동 후 기존 셀 위치 정보들을 삭제하고 재설정 해야 리사이징이 작동 가능하겠죠

$(function () {
  $("#sortable").sortable({
    items: 'th', update: function (event, ui) {  tbl_Resizable(); }
   });
 
function tbl_Resizable(){
   $(".JCLRgrips").remove(); 
   $("#sortable").colResizable({
   liveDrag:true,  postbackSafe:true, partialRefresh:true,
    gripInnerHtml:"<div class='grip'></div>",
    draggingClass:"dragging", resizeMode:'fit'

   });   
  }
 tbl_Resizable();

 });

 

 

다른 각각의 플러그인의 충돌은 해당 플러그인 제작자가 아니면 일일이 소스 분석하면서 알아내기 어려운 부분입니다
속도에 문제가 없다면, 일반적으로 이런 경우, 리사이즈 이벤트나 정렬 이벤트시에 기존에 이벤트를 지우고, 이벤트를 새로 등록하는 형태의 코드로 해결하는것이 낫습니다

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT