js플러그인, jquery 질문입니다.
관련링크
본문
jquery의 sortable을 이용하여 테이블 td를 드래그 앤 드롭으로 순서룰 변경하고
colResizable플러그인을 이용하여 td넓이를 드래그를 통해 변경하는 기능을 구현했습니다.
각 기능이 따로따로 동작할때는 문제가 없지만 sortable 기능이 작동 한 후에 colResizable 기능에 넓이 조정하는 지점이 문제가 생겨 제대로 동작이 되지 않는 것 같습니다.
td순서 변경 후 colResizable을 다시 초기화를 해도 같은 현상이 일어납니다.
관련 지식이 있으신 분들의 도움을 구합니다.
아래는 작성한 코드입니다.
<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();
});
감사합니다 정확히 작동하네요 가이드에 있는 내용인데 확인이 부족했습니다
다른 각각의 플러그인의 충돌은 해당 플러그인 제작자가 아니면 일일이 소스 분석하면서 알아내기 어려운 부분입니다
속도에 문제가 없다면, 일반적으로 이런 경우, 리사이즈 이벤트나 정렬 이벤트시에 기존에 이벤트를 지우고, 이벤트를 새로 등록하는 형태의 코드로 해결하는것이 낫습니다