TableDragger 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00607/article/details/141153077

TableDragger 使用教程

table-draggerTurn your old table to drag-and-drop table with columns and rows sorting like magic!项目地址:https://gitcode.com/gh_mirrors/ta/table-dragger

项目介绍

TableDragger 是一个开源的 JavaScript 库，旨在为 HTML 表格添加拖放排序功能。它不需要 jQuery，并且提供了简单易用的 API 来实现表格行和列的拖放排序。TableDragger 支持多种配置选项，如行模式、列模式、仅主体模式等，适用于各种复杂的表格排序需求。

项目快速启动

以下是一个简单的示例，展示如何使用 TableDragger 为 HTML 表格添加拖放排序功能。

引入 TableDragger

首先，你需要在 HTML 文件中引入 TableDragger 的 JavaScript 文件。

<!DOCTYPE html>
<html>
<head>
    <title>TableDragger 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/table-dragger@3.0.0/dist/table-dragger.min.js"></script>
</head>
<body>

创建表格

接下来，创建一个 HTML 表格。

<table id="my-table">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td>Cell 6</td>
        </tr>
    </tbody>
</table>

初始化 TableDragger

在 HTML 文件的底部，添加 JavaScript 代码来初始化 TableDragger。

<script type="text/javascript">
    var el = document.getElementById('my-table');
    var dragger = tableDragger(el, {
        mode: 'row',
        onlyBody: true,
        animation: 300
    });
    dragger.on('drop', function(from, to) {
        console.log(from, to);
    });
</script>
</body>
</html>