테이블은 웹 애플리케이션에서 데이터를 표시하는 데 널리 사용됩니다. 때로는 사용자가 테이블 행을 드래그하여 순서를 변경하는 기능을 추가해야 할 수 있습니다. 이를 자바스크립트 라이브러리인 TableSorter를 사용하여 구현할 수 있습니다.

TableSorter란?

TableSorter는 jQuery 플러그인으로, 정렬, 페이징, 필터링 및 다양한 테이블 조작 기능을 제공합니다. 이 라이브러리를 사용하면 테이블에서 셀을 드래그하여 순서를 변경할 수 있는 기능을 추가할 수 있습니다.

행 드래그 이동 구현하기

다음은 TableSorter를 사용하여 테이블 행을 드래그하여 이동하는 간단한 예제입니다.

1. 먼저 jQuery와 TableSorter 라이브러리를 HTML 문서에 추가합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.37.4/js/jquery.tablesorter.min.js"></script>

1. 테이블에 TableSorter를 적용하고, 드래그로 행 이동 기능을 활성화합니다.

$(document).ready(function() {
  // 테이블에 TableSorter 적용
  $("#myTable").tablesorter();

  // 드래그로 행 이동 기능 활성화
  $("#myTable tbody").sortable({
    helper: fixWidth
  }).disableSelection();

  // 드래그 시 셀 너비 유지
  function fixWidth(e, ui) {
    ui.children().each(function() {
      $(this).width($(this).width());
    });
    return ui;
  }
});

위의 코드에서는 #myTable로 테이블을 선택하고 tablesorter() 함수를 호출하여 TableSorter를 적용합니다. 그런 다음, sortable() 메서드를 사용하여 드래그로 행 이동 기능을 활성화하고, fixWidth 함수를 사용하여 드래그 중 셀의 너비를 유지합니다.

이제 테이블에서 행을 드래그하여 이동할 수 있습니다.

마무리

TableSorter를 사용하여 테이블에서 드래그로 행을 이동하는 방법을 살펴보았습니다. 이를 사용하여 사용자 친화적이고 직관적인 사용자 경험을 제공할 수 있습니다.

더 자세한 정보는 TableSorter 공식 문서를 참고하시기 바랍니다.

TableSorter 공식 문서

이상입니다!