当前位置:网站首页>拖拽改变顺序
拖拽改变顺序
2022-07-06 18:02:00 【阿六啊】
一个列表 通过拖拽 改变她的顺序
关键:draggable=“true” 可以拖拽
@dragstart=“” 开始拖拽
@drop=“”
@dragover=‘’
<template>
<div>
<li class="li_row" v-for="(item,index) in linkData " :key="index" draggable="true"
@dragstart="dragstart($event,index)" @drop="drop($event,index)" @dragover='dragover($event)'>
<div class="li_item title">{
{
item.name}}</div>
</li>
</div>
</template>
<script>
export default {
data() {
return {
linkData: [
{
name:'百度',url:'wwww.baidu.com',description:'baidu'},
{
name:'腾讯网',url:'wwww.qq.com',description:'tencent'},
{
name:'新浪微博',url:'https://www.weibo.com/',description:'weibo'},
{
name:'今日头条',url:'https://www.toutiao.com/',description:'bytedance'},
{
name:'哔哩哔哩',url:'https://www.bilibili.com/',description:'bilibili'}
]
}
},
methods: {
dragstart(e, index) {
e.dataTransfer.setData('index', index);
},
drop(event, index) {
event.preventDefault();
let startIndex = parseInt(event.dataTransfer.getData('index')); // 数据原本的index
let currentIndex = parseInt(index);// 数据现在的index
console.log("start", startIndex);
console.log("drop", currentIndex);
if (startIndex - currentIndex > 0) {
console.log("要拖拽的元素的索引 大于 当前位置的元素的索引");
this.linkData.splice(currentIndex, 0, this.linkData[startIndex]);
console.log("删除" + startIndex + 1);
this.linkData.splice(startIndex + 1, 1)
} else if (startIndex - currentIndex < 0) {
console.log("要拖拽的元素的索引 小于 当前位置的元素的索引");
this.linkData.splice(currentIndex + 1, 0, this.linkData[startIndex]);
this.linkData.splice(startIndex, 1)
} else {
console.log("什么也不用做");
}
},
// 拖动事件(主要是为了拖动时鼠标光标不变为禁止)
dragover(e) {
e.preventDefault()
},
},
}
</script>
<style lang="scss" scoped>
</style>
参考链接
https://blog.csdn.net/azuretodd/article/details/109973228
边栏推荐
- 剑指 Offer II 035. 最小时间差-快速排序加数据转换
- Receive user input, height BMI, BMI detection small business entry case
- Realize incremental data synchronization between MySQL and ES
- Lldp compatible CDP function configuration
- Case development of landlord fighting game
- JS reverse -- ob confusion and accelerated music that poked the [hornet's nest]
- 字节P7专业级讲解:接口测试常用工具及测试方法,福利文
- Gazebo的安装&与ROS的连接
- C language instance_ five
- Installation and testing of pyflink
猜你喜欢
Byte P7 professional level explanation: common tools and test methods for interface testing, Freeman
Wood extraction in Halcon
Send template message via wechat official account
【信号与系统】
C language - array
Start from the bottom structure to learn the customization and testing of fpga---- FIFO IP
1123. 最深叶节点的最近公共祖先
Yunna - work order management system and process, work order management specification
Gazebo的安装&与ROS的连接
shell脚本快速统计项目代码行数
随机推荐
[signal and system]
AcWing 1142. 繁忙的都市 题解(最小生成树)
Supersocket 1.6 creates a simple socket server with message length in the header
Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which
table表格设置圆角
1123. 最深叶节点的最近公共祖先
Match VIM from zero (0) -- Introduction to vimscript
Neon Optimization: an optimization case of log10 function
1123. The nearest common ancestor of the deepest leaf node
Force buckle 1037 Effective boomerang
[advanced C language] 8 written questions of pointer
C语言实例_4
接收用户输入,身高BMI体重指数检测小业务入门案例
2022 Google CTF segfault Labyrinth WP
C language instance_ three
Add the applet "lazycodeloading": "requiredcomponents" in taro,
负载均衡性能参数如何测评?
云呐|工单管理办法,如何开展工单管理
Share a general compilation method of so dynamic library
Implementation principle of waitgroup in golang