마우스로 td 간격 조정하기. 정보
JavaScript 마우스로 td 간격 조정하기.
본문
마우스 드레그를 이용해서 리스트 간격을 조정할 수 있어서 적용해 봤습니다.
==> 작업했으나 생각보다 기대에 못 미쳐 사용하진 않을 것 같았습니다.
재미로 봐주세요.
수정위치
: \skin\board\basic\list.skin.php
수정내용1 스타일 추가하기
<style>
.table {
border-collapse: collapse;
width: 100%;
}
.table th,
.table td {
padding: 0.5rem;
border: 1px solid #989696;
}
.table th {
position: relative;
cursor: grab;
user-select: none;
}
.table th:active {
cursor: grabbing;
}
.resizer {
position: absolute;
top: 0;
right: 0;
width: 5px;
cursor: col-resize;
user-select: none;
}
.resizer:hover,
.resizing {
border-right: 2px solid blue;
}
.dragging {
background-color: #f0f0f0;
}
</style>
수정사항 2 리스트 테이블 수정하기.
<!-- 게시판 목록 테이블에 id="resizeMe" class="resizable-table table table-hover"
id="header-row" 추가하기 -->
<div class="tbl_head01 tbl_wrap">
<table id="resizeMe" class="resizable-table table table-hover" >
<caption><?php echo $board['bo_subject'] ?> 목록</caption>
<thead>
<tr id="header-row">
==> id , class 추가해줌.
수정사항 3 자바스크립트 추가
<noscript>
<p>자바스크립트를 사용하지 않는 경우<br>별도의 확인 절차 없이 바로 선택삭제 처리하므로 주의하시기 바랍니다.</p>
</noscript>
<?php } ?> <!-- 여기쯤에 아래내용 붙여넣기 하면 됩니다. -->
<!-- TD간격조정 시작 -->
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.27/interact.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
console.log('bbb');
const makeTableResizableAndSortable = function (table) {
const tableBody = table.querySelector('tbody');
// Make rows sortable
const rowsSortable = new Sortable(tableBody, {
animation: 150,
});
// Make columns and table header cells draggable using interact.js
const headers = table.querySelectorAll('th');
interact(headers).draggable({
// Enable both left and right edges for dragging
edges: { left: true, right: true, bottom: false, top: false },
listeners: {
start(event) {
const target = event.target;
target.classList.add('dragging');
},
move(event) {
const target = event.target;
const dx = event.dx;
target.style.transform = `translate(${dx}px)`;
},
end(event) {
const target = event.target;
target.style.transform = '';
target.classList.remove('dragging');
},
},
}).resizable({
// Enable right edge for resizing
edges: { right: true },
restrictEdges: {
outer: 'parent',
},
restrictSize: {
min: { width: 50 },
},
listeners: {
move(event) {
const target = event.target;
const width = parseFloat(target.style.width) || 0;
target.style.width = width + event.dx + 'px';
},
},
});
};
const tables = document.querySelectorAll('.resizable-table');
tables.forEach(function (table) {
makeTableResizableAndSortable(table);
});
});
document.addEventListener('DOMContentLoaded', function () {
const createResizableTable = function (table) {
const cols = table.querySelectorAll('th');
[].forEach.call(cols, function (col) {
// Add a resizer element to the column
const resizer = document.createElement('div');
resizer.classList.add('resizer');
// Set the height
resizer.style.height = `${table.offsetHeight}px`;
col.appendChild(resizer);
createResizableColumn(col, resizer);
});
};
const createResizableColumn = function (col, resizer) {
let x = 0;
let w = 0;
const mouseDownHandler = function (e) {
x = e.clientX;
const styles = window.getComputedStyle(col);
w = parseInt(styles.width, 10);
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
resizer.classList.add('resizing');
};
const mouseMoveHandler = function (e) {
const dx = e.clientX - x;
col.style.width = `${w + dx}px`;
};
const mouseUpHandler = function () {
resizer.classList.remove('resizing');
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
resizer.addEventListener('mousedown', mouseDownHandler);
};
createResizableTable(document.getElementById('resizeMe'));
});
</script>
<!-- TD간격조정 마침 -->
!-->!-->!-->
추천
0
0
댓글 1개
좋지만 쓸수는 없는게 맞네요 ^^;