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

 

 

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

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

      재미로 봐주세요.

 

 

수정위치

: \skin\board\basic\list.skin.php

 

 

수정내용1 스타일 추가하기

[code]

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

[/code]

 

 

수정사항 2  리스트 테이블 수정하기.

[code]

  <!-- 게시판 목록 테이블에  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">

[/code]

==>  id , class 추가해줌.

 

 

수정사항 3   자바스크립트 추가

[code]

<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간격조정 마침 -->

[/code]