前言
在前端开发中，表格是我们最常用的组件之一。但是，有时候我们需要对表格进行拖拽排序或者行列宽度拖拽调整等操作，这时候就需要借助一些插件来完成。其中，table-dragger-made 是一款优秀的插件，可以方便地实现表格中的拖拽操作。
本文将详细介绍 table-dragger-made 的使用方式，并提供示例代码，帮助读者更好地理解和学习。
安装
table-dragger-made 是一款通过 npm 安装的插件，因此我们需要先在终端中输入以下命令来安装它：
npm install table-dragger-made
安装完成后，我们便可以开始使用它了。
基本用法
在引入 table-dragger-made 插件之前，我们需要先引入 table-dragger-made.css 和 table-dragger-made.js 两个文件：
<link rel="stylesheet" href="path/to/table-dragger-made.css"> <script src="path/to/table-dragger-made.js"></script>
接着，我们需要在 table 元素上添加 data-table-dragger 属性和 class 属性，并调用 tableDraggerMade 方法来初始化插件：
-- -------------------- ---- -------
------ ------------------ --------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-------------
-----------
----------
-----
----
--------------
-----------
----------
-----
----
--------------
-----------
----------
-----
--------
--------
--------
----- ----- - ----------------------------------------------------
------------------------
---------这样，我们就可以在表格中进行拖拽排序了。
高级用法
table-dragger-made 还提供了一些自定义配置项，可以满足更多场景的需求。
列宽度可调整
要让列宽度可调整，我们需要在 tableDraggerMade 方法中传入一个 options 对象，设置 dragMode 选项为 table，并在 thead 的 th 元素中添加 data-tdm-droppable 属性：
-- -------------------- ---- -------
------ ------------------ ------------ ----------------
-------
----
--- --------------------------
--- --------------------------
--- --------------------------
-----
--------
-------
----
-------------
-----------
----------
-----
----
--------------
-----------
----------
-----
----
--------------
-----------
----------
-----
--------
--------
--------
----- ----- - ----------------------------------------------------
----------------------- -
--------- -------
---
---------拖拽效果自定义
table-dragger-made 还支持自定义拖拽效果。我们可以在 options 对象中设置 handle 选项，传入一个函数用于创建拖拽效果的元素：
-- -------------------- ---- -------
------ ------------------ ------------ ----------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-------------
-----------
----------
-----
----
--------------
-----------
----------
-----
----
--------------
-----------
----------
-----
--------
--------
--------
----- ----- - ----------------------------------------------------
----------------------- -
------- -- -- -
----- ------ - ------------------------------
------------------ - -------
------------------- - -------
----------------------- - -------
------ -------
-
---
---------总结
通过本文的介绍，我们了解了 table-dragger-made 插件的基本用法和高级用法，可以方便地实现表格中的拖拽操作，并适应更多场景需求。同时，我们也讲解了如何在 table-dragger-made 的方法中传入 options 对象来进行自定义。最后，我们提供了示例代码，供读者更好地学习和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbf81e8991b448e6395