TableDnD 是一款方便易用的 JavaScript 库，可以帮助开发者快速地实现表格拖放排序和行列交换等操作。该库可以与 jQuery 和其他常用的前端框架集成，并提供了丰富的配置项，使得开发者可以根据自己的需求进行定制。
安装
TableDnD 可以通过 npm 安装：
npm install jquery-tablednd
如果你没有安装 jQuery，也可以通过以下命令一并安装：
npm install jquery jquery-tablednd
使用
在 HTML 文件中引入 TableDnD 的 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="jquery-tablednd.css"> <script src="jquery.min.js"></script> <script src="jquery-tablednd.js"></script>
接下来，在 JavaScript 代码中初始化 TableDnD：
$("#mytable").tableDnD({
onDrop: function(table, row) {
// 表格行拖放成功后的回调函数
}
});其中，#mytable 是你要添加功能的表格的 id。onDrop 函数是可选的，它会在表格行拖放成功时被调用，你可以在这个函数中处理拖放之后的逻辑。
配置项
TableDnD 提供了多种配置项，可以满足不同场景下的需求。以下是一些常用的配置项：
onDrop：表格行拖放成功时的回调函数。onDragStart：表格行开始拖放时的回调函数。onDragClass：被拖放的行在拖动过程中添加的 CSS 类名。onDropMode：拖放模式，可以设置为row或column。dragHandle：允许用户通过指定的元素来拖动行。
更多配置项和详细说明请参考官方文档。
示例
下面是一个简单的示例，用于演示 TableDnD 的基本用法。在这个示例中，我们创建了一个包含三列数据的表格，并使用 TableDnD 实现了行的拖放排序功能。
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
--------------- ----------
----- ---------------- ---------------------------
-------
----- -
---------------- ---------
-
-- -
------- --- ----- -----
-------- -----
-
-- -
----------------- -----
------- --- ----- -----
-------- -----
----------- -----
-
--------
-------
------
------ -------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
----------
-----------
-----
----
-----------
----------
-----------
-----
----
-----------
----------
-----------
-----
----
-----------
----------
-----------
-----
--------
--------
------- -----------------------------
------- ----------------------------------
--------
-------------------------
---------
-------
-------在这个示例中，我们在 HTML 文件头部引入了 TableDnD 的 CSS 文件，并在表格的每一行上添加了 `
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37210