在前端开发中，可拖拽列表是一个非常常见的需求。Vue.js 作为一种流行的前端框架，提供了多种实现可拖拽列表的方式。本文将介绍其中一种实现方式，通过深入学习此实现方式，你将掌握如何在 Vue.js 中实现可拖拽列表，并且能够根据自己的需求进行扩展。
实现方式
Vue.js 中实现可拖拽列表的方式主要有两种，一种是使用第三方插件，比如 vuedraggable、sortablejs 等；另一种则是自己手动实现。
本文将介绍第二种实现方式，手动实现可拖拽列表。
实现步骤
1. 定义列表项组件
在 Vue.js 中，列表项可以看作是一个组件。首先我们需要定义一个列表项组件，该组件可以接收传入的数据，并根据传入的数据进行渲染。
-- -------------------- ---- -------
----------
---- -------------------- ---- --------
-----------
--------
------ ------- -
------ -
----- -
----- -------
--------- ----
-
-
-
---------在上面的代码中，我们定义了一个 list-item 组件，该组件接收一个 item 属性，该属性类型为字符串，且是必须的。组件内部将根据 item 属性进行渲染。
2. 定义列表组件
接下来我们需要定义一个列表组件，该组件将包含多个列表项组件，并且支持拖拽排序。
-- -------------------- ---- -------
----------
---- -------------
----------
------------- ------ -- -----
------------
------------
--
------
-----------
--------
------ -------- ---- ----------------
------ ------- -
----------- -
--------
--
------ -
----- -
----- ------
--------- ----
-
-
-
---------在上面的代码中，我们定义了一个 list 组件，该组件接收一个 list 属性，该属性类型为数组，且是必须的。组件内部将根据 list 属性进行渲染，渲染多个 list-item 组件。
3. 实现拖拽排序
接下来我们需要实现拖拽排序功能。我们可以使用 HTML5 中的 draggable 属性来实现拖拽功能。
首先我们需要在 list-item 组件中设置 draggable 属性：
<template>
<div class="list-item" draggable="true">{{ item }}</div>
</template>接着我们需要在 list 组件中监听拖拽事件，并根据拖拽事件来实现排序功能：
-- -------------------- ---- -------
----------
---- ------------
----------------------------
--------------------------
------------------
-
----------
------------- ------ -- -----
------------
------------
--------------
--
------
-----------
--------
------ -------- ---- ----------------
------ ------- -
----------- -
--------
--
------ -
----- -
----- ------
--------- ----
-
--
------ -
------ -
------------- ----
-
--
-------- -
---------------------- -
----------------- - ---------------------------------------
--
--------------------- -
----------------------
----------------------------- - ------
--
----------------- -
----------------------
----- ----------- - ---------------------------------------
----- ---- - --------------
----- ----------- - ------------------------------ -----
------------------------ -- ------------
------------------------- -----
-
-
-
---------在上面的代码中，我们在 list 组件中监听了 dragstart、dragover 和 drop 事件，并分别对应了三个方法：handleDragStart、handleDragOver 和 handleDrop。
在 handleDragStart 方法中，我们获取了被拖拽的元素的索引，并保存在了 draggedIndex 变量中。
在 handleDragOver 方法中，我们阻止了默认的拖拽行为，并设置了 dropEffect 属性为 move，表示可以将元素移动到当前位置。
在 handleDrop 方法中，我们获取了目标元素的索引，并将被拖拽的元素从列表中移除，并插入到目标元素的位置。最后我们通过 $emit 方法将更新后的列表数据传递给父组件。
至此，我们已经完成了可拖拽列表的实现。
示例代码
下面是完整的示例代码：
-- -------------------- ---- -------
----------
---- ------------
----------------------------
--------------------------
------------------
-
----------
------------- ------ -- -----
------------
------------
--------------
--
------
-----------
--------
------ -------- ---- ----------------
------ ------- -
----------- -
--------
--
------ -
----- -
----- ------
--------- ----
-
--
------ -
------ -
------------- ----
-
--
-------- -
---------------------- -
----------------- - ---------------------------------------
--
--------------------- -
----------------------
----------------------------- - ------
--
----------------- -
----------------------
----- ----------- - ---------------------------------------
----- ---- - --------------
----- ----------- - ------------------------------ -----
------------------------ -- ------------
------------------------- -----
-
-
-
----------- -------------------- ---- -------
----------
---- ----------------- ---------------- ---------------------- ---- --------
-----------
--------
------ ------- -
------ -
----- -
----- -------
--------- ----
--
------ -
----- -------
--------- ----
-
-
-
---------指导意义
通过本文的学习，我们可以了解到 Vue.js 中实现可拖拽列表的一种方式。这种方式虽然需要手动实现，但是相比使用第三方插件，可以更加灵活地控制拖拽行为，并且可以根据自己的需求进行扩展。
在实际开发中，我们可以根据自己的需求进行修改和扩展，比如支持拖拽到指定位置、拖拽时显示占位符等等。同时，我们也可以通过学习第三方插件的源码，了解更多实现方式和优化方法。
总之，学习可拖拽列表的实现方式，对于提升前端开发能力和应对实际开发需求都具有重要的指导意义。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67961853504e4ea9bdc9769d