介绍
@spartez/vue-slicksort 是一个针对 Vue.js 的拖拽排序组件库。它具有以下特点：
- 可以水平和垂直方向进行拖拽排序；
- 可以限制拖拽的范围；
- 可以自定义拖拽的样式。
安装
在使用 @spartez/vue-slicksort 前，你需要先安装它。你可以通过 npm 安装它，执行以下命令：
npm install @spartez/vue-slicksort --save
使用
在使用 @spartez/vue-slicksort 时，你需要先引入该组件，并在 Vue 实例中注册：
<script>
import Vue from 'vue'
import SlickSort from '@spartez/vue-slicksort'
export default {
components: { SlickSort }
}
</script>接着，在你的模板中使用 slick-sort 标签，示例如下：
-- -------------------- ---- -------
----------
----------- ------------ -----------------
----
------------- ------ -- -----
--------------
----------------- ---------- - ---- - -----
-
-- --------- --
------
-------------
-----------
--------
------ --- ---- -----
------ --------- ---- ------------------------
------ ------- -
----------- - --------- --
------ -
------ -
----- -
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- -
-
-
--
-------- -
--------------------- -
--------- - ----------
-
-
-
---------在上面的示例中，我们使用了 slick-sort 标签，并将列表数据传递给了 list 属性，同时监听了 end 事件，并在回调中将排序后的列表数据更新到了组件的 list 属性中。
属性
在使用 slick-sort 标签时，你可以通过以下属性来自定义拖拽排序的样式和行为。
list
- 类型：
Array
列表数据。
item-class
- 类型：
String|null - 默认值：
null
列表项的 CSS 类名，可用于覆盖默认样式。
item-key
- 类型：
String - 默认值：
id
用于唯一标识每个列表项的属性名。
transition-duration
- 类型：
Number - 默认值：
300
动画过渡的时间（毫秒）。
lock-axis
- 类型：
String|null - 默认值：
null
锁定拖拽的轴向，可选值为 x（水平方向）或 y（垂直方向）。
max-scroll-speed
- 类型：
Number - 默认值：
10
滚动容器的最大滚动速度。
no-sort
- 类型：
Boolean - 默认值：
false
是否禁止排序。
no-drag
- 类型：
Boolean - 默认值：
false
是否禁止拖拽。
disabled
- 类型：
Boolean - 默认值：
false
是否禁用拖拽排序。
handle
- 类型：
String|null - 默认值：
null
拖拽操作的句柄 CSS 类名，在该句柄上才可以进行拖拽操作。
use-window-as-scroll-container
- 类型：
Boolean - 默认值：
false
是否将 window 对象作为容器，开启后可以实现窗口滚动。
container-class
- 类型：
String|null - 默认值：
null
排序容器的 CSS 类名。
事件
在使用 slick-sort 标签时，你可以通过监听以下事件来响应拖拽排序的行为。
start
当拖拽操作开始时触发，可以在这里进行一些初始化操作。
move
当拖拽操作进行中时触发，可以在这里对拖动中的元素进行位置计算等操作。
end
当拖拽操作结束时触发，将排序后的列表数据作为参数传递给回调函数。
cancel
当拖拽操作被取消时触发，比如用户按下了 ESC 键或拖拽到了一个不允许的位置。
clone
当拖拽操作开始时，用于生成拖拽元素的克隆节点。
示例
以下是一个完整的示例代码，你可以复制粘贴到你的项目中进行使用。
-- -------------------- ---- -------
----------
---- ------------------
---- ------------
-----------
------------
------------
--------------------------
----------------------
------------------------ -- ---------------------
----------------
-----------------------
--------------------
------------------
----------------
----------------------
--------------------
-
----
-----------------
------------- ------ -- -----
--------------
-
-- --------- --
----- ----------------- -------- - ----- - ----- ---------
------
-------------
------
---- ------------
-------
------ --------------- -------------------- --
-------------------
--------
-------
------ --------------- ------------------ --
------------------
--------
------- ---- --------
------
------
-----------
--------
------ --------- ---- ------------------------
------ ------- -
----------- - --------- --
------ -
------ -
----------- ------
--------- ------
----- -
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- --
- --- ---- ----- ----- -- -
-
-
--
-------- -
------------- -
----------------- -------
--
------------ -
----------------- ------
--
--------------------- -
----------------- ----- -----------
--------- - ----------
--
-------------- -
----------------- --------
--
------------- -
----------------- -------
-
-
-
---------
-------
---------- -
-------- -----
---------------- --------------
------------ -------
-
---- -
-------- -----
--------------- -------
------------ -------
------- -----
-
----- -
-------- -----
--------------- -------
------------ -----------
-------- -----
------- --- ----- -----
------ ------
----------- ------
-
---------- -
-------- -----
---------------- --------------
------------ -------
-------- -----
-------------- ----
----------------- -----
------- ---- --
------- -----
------------ -----
----------- --------- --- -----
-
---------------- -
---------- ------------------
----------- - --- ---- ------- -- -- ----
-
----------------- -
---------- ----------------- -----------
----------- - --- ---- ------- -- -- ----
-
------- -
------ -----
------- -----
-------- -----
---------------- -------
------------ -------
---------- -----
------------ -----
-------------- ----
----------------- -----
------ -----
------------ -----
-
------------- -
----------------- -----
-
-------------- -
---------- -----------
-
------------------- -
-------- -- -----------
------- ----------- -----------
-
--------在上面的示例中，我们通过 isSortable 属性来动态控制 “开启拖拽排序” 的选项，同时通过 isMobile 属性来模拟移动端的样式。我们还监听了 start、move、end、cancel 和 clone 事件，对排序过程进行了一些输出，便于调试。
你可以通过以下步骤启动示例项目：
- 克隆示例项目到本地：
git clone https://github.com/vuejs/vue-slicksort.git - 安装依赖：
npm install - 启动项目：
npm run dev - 在浏览器访问
http://localhost:8080/即可查看示例。
总结
@spartez/vue-slicksort 是一个非常方便且易用的拖拽排序组件库。本文介绍了如何在 Vue.js 中使用该库，包括安装、使用、属性和事件等方面的内容。当你需要对列表进行拖拽排序时，@spartez/vue-slicksort 绝对是一个值得推荐的组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f7277583985