Vue实现拖拽改变列表顺序

当我们构建前端应用时,有时需要实现一些交互性强的功能,比如拖拽改变列表顺序。在本文中,我将演示如何使用 Vue.js 实现这样一个功能。

首先,我们需要一个基本的 Vue 组件结构,包括 HTML 模板、JavaScript 逻辑和 CSS 样式。我们将在 Vue 组件中实现拖拽改变列表顺序的功能。

html 复制代码
<template>
  <div ref="list" 
    :ondragstart="dragstart"
    :ondragenter="dragenter"
    :ondragend="dragend"
    class="list">
    <div draggable="true" class="item" v-for="i in 10">{{ i }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 被拖拽的父元素
const list = ref(null)
// 当前被拖拽的元素
const sourceNode = ref(null)

// 拖拽开始事件
const dragstart = (e) => {
  setTimeout(() => {
    // 需要异步 不然元素直接消失
    sourceNode.value = e.target
    e.target.classList.add('moving')
  }, 0)
}

const dragenter = (e) => {
  // 阻止浏览器默认行为,否则放手时会回到原位
  e.preventDefault()
  if(e.target === list.value || e.target === sourceNode.value) {
    // 如果是在父元素上,或在自身元素上,不做任何处理
    return;
  }
  const children = [... list.value.children]
  const sourceIndex = children.indexOf(sourceNode.value)
  const targetIndex = children.indexOf(e.target)
  // 插入到对应位置
  if(sourceIndex < targetIndex) {
    list.value.insertBefore(sourceNode.value, e.target.nextElementSilbling)
  }else {
    list.value.insertBefore(sourceNode.value, e.target)    
  }
}

const dragend = (e) => {
  e.target.classList.remove('moving')
}
</script>

<style scoped>
.box {
  height: 80vw;
}
.item {
  height: 40px;
  background-color: antiquewhite;
  margin: 10px;
  cursor: pointer;
}

.item.moving {
  background: #ccc;
  color: transparent;
  border: 1px dashed #ccc;
}
</style>

以上是完整的代码。现在让我们逐步解释这段代码是如何工作的。

  1. <template> 部分包含了我们的 HTML 结构。我们有一个包含一些可拖拽元素的容器,每个元素都有一个拖拽事件。
  2. <script setup> 部分是 Vue.js 3 的新特性,用于编写组件的逻辑。在这里,我们引入了 ref 函数,用来创建响应式数据。我们创建了两个 ref,一个用于跟踪被拖拽的父元素,另一个用于跟踪当前被拖拽的元素。然后我们定义了三个函数,分别处理拖拽开始、拖拽进入和拖拽结束事件。
  3. dragstart 函数中,我们设置了一个异步定时器,以确保获取到正确的被拖拽元素。然后我们给被拖拽的元素添加一个 moving 类,用于在拖拽时改变其样式。
  4. dragenter 函数处理拖拽进入事件。我们首先阻止了浏览器的默认行为,然后判断当前拖拽的目标元素是否是列表容器本身或者是拖拽元素本身,如果是则不进行任何处理。接着,我们获取了列表容器中所有子元素,并计算出被拖拽元素和目标元素的索引,然后根据这些索引将被拖拽元素插入到正确的位置。
  5. dragend 函数在拖拽结束时移除了被拖拽元素的 moving 类,恢复其原始样式。
  6. 最后,<style scoped> 部分包含了组件的 CSS 样式,包括列表容器和拖拽元素的样式定义。
相关推荐
并不会38 分钟前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子40 分钟前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、41 分钟前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜41 分钟前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师44 分钟前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js