在前端开发中，拖拽排序功能常常被应用于列表、菜单等需要用户自定义顺序的场景中。Vue.js 是一个流行的前端框架，支持响应式数据绑定和组件化开发，可以方便地实现拖拽排序功能。
实现思路
实现拖拽排序功能需要处理以下三个过程：
- 鼠标按下时记录拖动元素的信息，设置拖动时的样式。
- 鼠标移动时根据鼠标位置计算拖动元素的位置，以及被拖动元素与其他元素的相对位置关系。
- 鼠标松开时根据被拖动元素与其他元素的相对位置关系，更新列表中元素的顺序。
我们可以通过 Vue.js 的指令和事件绑定来实现这些过程。具体实现如下。
实现代码
首先，在列表中的每个元素上，加入一个自定义指令 drag，用于监听鼠标拖动事件，并修改元素的拖动状态。指令的代码如下：
-- -------------------- ---- -------
--------------------- -
----- -------- ---- -------- -
--- ------- ------- -------- --------
----------------- - -----------
-------------------------------- -----------
--------------------------------- -----------
-------- -------------- -
------ - ----------- -- -----------------------
------ - ----------- -- -----------------------
------- - --------------
------- - -------------
-----------------------------
-------------------------------------- --------
-------------------------------------- --------
------------------------------------ ----------
------------------------------------- ----------
-
-------- ----------- -
--- ---- - ----------- -- -----------------------
--- ---- - ----------- -- -----------------------
------------- - -------- - ---- - ------- - -----
------------ - -------- - ---- - ------- - -----
-
-------- ------------- -
--------------------------------
----------------------------------------- --------
----------------------------------------- --------
--------------------------------------- ----------
---------------------------------------- ----------
-
-
---这个指令绑定到列表中的每个元素上，在元素上添加了 mousedown 和 touchstart 事件监听器，用于在鼠标或触摸屏按下时记录元素的位置信息。然后添加了 mousemove 和 touchmove 事件监听器，根据鼠标或触摸屏的位置计算新的拖动位置，并更新元素的样式。最后在 mouseup 和 touchend 事件监听器中，取消事件监听器，并移除元素的拖动样式。
接下来，渲染列表时，用一个数组来存储每个元素的顺序信息，绑定到元素的 data-order 属性上。列表的渲染代码如下：
<template>
<div>
<div v-for="(item, index) in items" :key="item.id" :data-order="index" v-drag>
{{ item.name }}
</div>
</div>
</template>这个列表的每个元素绑定了 v-drag 自定义指令，用于实现拖拽效果，并绑定了 data-order 属性，保存了元素的顺序信息。同时，使用 Vue.js 的 v-for 指令来循环列表数据。
接下来是最关键的一步，为整个列表添加事件监听器，当列表中元素顺序发生变化时，触发对应的事件，更新列表数据。代码如下：
-- -------------------- ---- -------
------ ------- -
----- -------- -- -
------ -
------ -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
-
--
--
-------- -------- -- -
--- -- - ---------
--- ---- - -----
--- -------- - -----
-------------------------------- -------- ----- -
-- ------------------------------------------- -
---------------------
-------------------------------------
-
---
------------------------------- -------- ----- -
-- ------------------------------------------- -
---------------------
-
---
-------------------------------- -------- ----- -
-- ------------------------------------------- -
---------------------
----------------------------------------
-
---
--------------------------- -------- ----- -
-- ------------------------------------------- -
---------------------
----------------------------------------
--- -------- - -----------
--- ----- - ----------------------------------------------
-- --------- --- ---- -- -------- --- ------ -
----------------------- -------
-
-
---
-------------------------------- -------- ----- -
-------- - ----------------------------------------------- ----
---
------------------------------ -------- ----- -
-------- - -----
--------------------
---
--
-------- -
--------- -------- ----------- ---------- -
--- ----- - -----------
--- -------- - -----------------
----------------------- ---
----------------------- -- ----------
-
-
--这个代码段中，为列表元素的父元素添加了 dragenter、dragover、dragleave 和 drop 事件监听器，用于监听拖拽元素与其他元素的相对位置关系，并根据相对位置关系更新列表数据。此外，还添加了 dragstart 和 dragend 事件监听器，用于记录拖拽的元素信息，并在拖拽结束时强制更新列表的显示。
在 moveItem 方法中，根据拖拽元素和目标元素的顺序信息，将元素从原来的位置删除，并在目标位置添加相同的元素。这个操作会触发 Vue.js 的响应式数据绑定机制，自动更新列表的显示。
最后，在 CSS 样式文件中添加样式，用于设置拖动状态下元素的样式。例如：
.dragging {
cursor: move;
opacity: 0.5;
z-index: 1000;
}总结
使用 Vue.js 实现拖拽排序功能需要处理三个过程：鼠标按下时记录拖动元素的信息；鼠标移动时根据鼠标位置计算拖动元素的位置；鼠标松开时根据被拖动元素与其他元素的相对位置关系，更新列表中元素的顺序。我们可以通过 Vue.js 的指令和事件绑定来实现这个功能。
在本文中，我们实现了一个简单的拖拽排序功能，并使用了 Vue.js 的自定义指令和事件绑定来处理拖拽逻辑。这个功能可以用于网页中的菜单、列表、图标等的排序。我们希望这个实例可以帮助你更好地理解 Vue.js 中指令和事件的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450b757980a9b385b9a8190