마우스로 td 간격 조정하기. > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

마우스로 td 간격 조정하기. 정보

JavaScript 마우스로 td 간격 조정하기.

본문

1889558542_1738022181.234.gif

 

 

마우스 드레그를 이용해서 리스트 간격을 조정할 수 있어서 적용해 봤습니다.

==> 작업했으나 생각보다 기대에 못 미쳐 사용하진 않을 것 같았습니다. 

      재미로 봐주세요.

 

 

수정위치

: \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

댓글 1개

전체 5,383
개발자팁 내용 검색

회원로그인

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