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 样式,包括列表容器和拖拽元素的样式定义。
相关推荐
new出一个对象2 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥3 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
天天进步20156 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html