vue 实现基础的拖拽排序

Vue 同时被 2 个专栏收录
21 篇文章 1 订阅
24 篇文章 0 订阅

主要使用下面三个事件绑定

@dragstart=func(index, e) 开始拖元素触发,作用于拖拽元素, index为拖拽开始的位置
@dragover=func(index, e) 当元素拖动到drop元素上时触发,index为拖拽结束的位置
@drop=func(index, e) 当元素放下到drop元素触发,index为拖拽结束的位置

我主要是使用 @dragstart 以及 @drop 这两个事件

// html
<li 
 v-for="(item, index) in defComAppList" 
 :key="item.appName"
 draggable    // 使用拖拽
 @drop="dragDrop(index, $event)"
 @dragover.prevent="dragOver"   // 占位事件
 @dragstart="exchangeVid($event, index, item)"
></li>

// js
// 拖拽开始
exchangeVid(e, index, item) {
	// 记录当前开始拖拽的位置 
  e.dataTransfer.setData('dragData', JSON.stringify({ i: index }))
},

// 拖拽结束
dragDrop(index, e) {
  // 获取当前目标开始拖拽的位置
  const dragObj = JSON.parse(e.dataTransfer.getData('dragData'))
  // 位置不一样就交换  
  if (index !== dragObj.i) {
    const item = this.defComAppList.splice(dragObj.i, 1)[0]
    this.defComAppList.splice(index, 0, item)
  }
},

// 占位函数
dragOver() {},
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:护眼 设计师:闪电赇 返回首页

打赏作者

pspxuan

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值