在前端开发中，拖拽排序是一个很常见的交互功能。在 Vue.js 中，我们可以通过自定义组件来实现拖拽排序的功能。
基本思路
在 Vue.js 中实现拖拽排序的基本思路是：
- 使用 HTML5 中的拖拽 API，将拖拽的元素在拖拽时在 DOM 树中移动的位置和顺序存储在 Vue 中的数据中。
- 使用 Vue 的渲染函数，将数据渲染成 DOM。
- 在数据变化时，重新渲染 DOM。
实现步骤
以下是实现拖拽排序组件的详细步骤：
1. 创建组件
首先，创建一个名为 DragList 的组件，并定义 items 属性作为数据源。
-- -------------------- ---- -------
----------
----
--- ----------- -- ------ ----------------- --------- -------
-----
-----------
--------
------ ------- -
----- -----------
------ -
------ -
----- ------
-------- -- -- --
-
-
-
---------2. 绑定拖拽事件
在模板中绑定拖拽事件，分别为 dragstart、dragover、dragenter、dragleave、dragend 和 drop。拖拽事件的具体作用分别如下：
dragstart：在元素上开始拖拽时触发，保存被拖拽元素的索引。dragover：拖拽元素在另一个元素上方时触发，防止默认事件并设置允许拖放。dragenter：拖拽元素进入另一个元素时触发，修改样式。dragleave：拖拽元素离开另一个元素时触发，恢复样式。dragend：拖拽结束时触发，清空保存的索引。drop：在另一个元素中放置拖拽元素时触发，交换数据源中两个元素的位置。
-- -------------------- ---- -------
----------
----
--- ------------- ------ -- ------ --------------
-----------------------------
-----------------
-----------------------------
----------------------
------------------
-------------------
--- --------- -------
-----
-----------
--------
------ ------- -
----- -----------
------ -
------ -
----- ------
-------- -- -- --
-
--
---- -- -
------ -
------------- ----
-
--
-------- -
--------- ------- -
----------------- - -----
--
--------- ------- -
-- ------------------ --- ---- -- ----- --- ------------------ -
------------------------ -- ------------------------------------ ------
-
--
--------- -- -
-- ----
--
------- -- -
----------------- - ----
--
---- ------- -
---------------------
-
-
-
---------3. 渲染列表
在组件的 render 函数中，将数据源渲染成拖拽列表。
-- -------------------- ---- -------
----------
----
--- ------------- ------ -- ------ --------------
-----------------------------
-----------------
-----------------------------
----------------------
------------------
-------------------
--------- ------- ------------ --- ----- --
--- --------- -------
-----
-----------
--------
------ ------- -
----- -----------
------ -
------ -
----- ------
-------- -- -- --
-
--
---- -- -
------ -
------------- ----
-
--
-------- -
--------- ------- -
----------------- - -----
--
--------- ------- -
-- ------------------ --- ---- -- ----- --- ------------------ -
------------------------ -- ------------------------------------ ------
-
--
--------- -- -
-- ----
--
------- -- -
----------------- - ----
--
---- ------- -
---------------------
-
--
------ --------------- -
------ ------------------- --------------------- ------ -- -
------ ------------------- -
---- --------
--- -
---------- -- -- - --------------------- --
--------- - -- -
------------------
--
---------- -- -- - --------------------- --
---------- ---------------
-------- -------------
----- -- -- - ---------------- -
--
------ - ------- ----------------- --- ----- -
-- ----------
---
-
-
---------
-------
------- -
----------------- --------
-
--------示例代码
完整的拖拽排序组件示例代码如下：
-- -------------------- ---- -------
----------
-----
---------- ---- --- ---- ---------
--------- ------------- --
------
-----------
--------
------ -------- ---- ------------
------ ------- -
----- ---------------
----------- -
--------
--
---- -- -
------ -
----- -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- --- ----- ----- --- -
-
-
-
-
----------- -------------------- ---- -------
----------
----
--- ------------- ------ -- ------ --------------
-----------------------------
-----------------
-----------------------------
----------------------
------------------
-------------------
--------- ------- ------------ --- ----- --
--- --------- -------
-----
-----------
--------
------ ------- -
----- -----------
------ -
------ -
----- ------
-------- -- -- --
-
--
---- -- -
------ -
------------- ----
-
--
-------- -
--------- ------- -
----------------- - -----
--
--------- ------- -
-- ------------------ --- ---- -- ----- --- ------------------ -
------------------------ -- ------------------------------------ ------
-
--
--------- -- -
-- ----
--
------- -- -
----------------- - ----
--
---- ------- -
---------------------
-
--
------ --------------- -
------ ------------------- --------------------- ------ -- -
------ ------------------- -
---- --------
--- -
---------- -- -- - --------------------- --
--------- - -- -
------------------
--
---------- -- -- - --------------------- --
---------- ---------------
-------- -------------
----- -- -- - ---------------- -
--
------ - ------- ----------------- --- ----- -
-- ----------
---
-
-
---------
-------
------- -
----------------- --------
-
--------在使用时，只需要将 DragList 组件导入到父组件中即可：
-- -------------------- ---- -------
----------
-----
---------- ---- --- ---- ---------
--------- ------------- --
------
-----------
--------
------ -------- ---- ------------
------ ------- -
----- ---------------
----------- -
--------
--
---- -- -
------ -
----- -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- --- ----- ----- --- -
-
-
-
-
---------总结
本文介绍了在 Vue.js 中实现拖拽排序组件的基本思路和实现步骤，并附上了完整的示例代码，在实现拖拽排序功能时可供参考。可以根据需要稍微修改组件的样式和实现细节，以适应各种场景的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ce35348841e9894994bc8