[javascript] TableSorter를 이용한 테이블의 셀에 드래그 앤 드롭 기능 추가하기

18 Dec 2023

javascript

TableSorter는 테이블을 정렬하고 필터링하는 jQuery 플러그인으로, 테이블을 조작하는 다양한 기능을 제공합니다. 이 플러그인을 사용하여 테이블의 셀에 드래그 앤 드롭 기능을 추가하여 보다 유연한 사용자 경험을 제공할 수 있습니다.

TableSorter 설정

TableSorter를 사용하려면 먼저 해당 플러그인을 웹 페이지에 로드하고 테이블에 적용해야 합니다. 다음과 같이 스크립트를 이용하여 플러그인을 로드하고 테이블에 적용할 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.33.3/js/jquery.tablesorter.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myTable").tablesorter();
    });
</script>

드래그 앤 드롭 설정

드래그 앤 드롭 플러그인을 사용하기 전에, 다음과 같이 해당 플러그인을 웹 페이지에 로드하고 테이블의 셀에 적용해야 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $(function() {
            $("td").draggable({
                helper: "clone"
            });
            $("td").droppable({
                drop: function(event, ui) {
                    var draggableText = ui.draggable.text();
                    $(this).text(draggableText);
                }
            });
        });
    });
</script>

위의 코드는 jQuery UI를 사용하여 테이블의 각 셀을 draggable 및 droppable로 만듭니다. 드래그한 셀을 다른 셀 위에 놓을 때, drop 이벤트가 발생하며 드래그한 셀의 내용이 드롭한 셀로 변경됩니다.

결론

위의 설정을 통해 TableSorter와 드래그 앤 드롭 플러그인을 함께 사용하여, 테이블의 셀에 드래그 앤 드롭 기능이 추가됩니다. 이를 통해 사용자는 보다 간편하게 데이터를 이동하고 편집할 수 있게 되며, 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.