当前位置:网站首页>Drag to change order
Drag to change order
2022-07-07 01:35:00 【Ah Liu】
A list of Drag and drop Change her order
The key :draggable=“true” Drag and drop
@dragstart=“” Start dragging
@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:' Baidu ',url:'wwww.baidu.com',description:'baidu'},
{
name:' Tencent network ',url:'wwww.qq.com',description:'tencent'},
{
name:' Sina weibo ',url:'https://www.weibo.com/',description:'weibo'},
{
name:' Today's headline ',url:'https://www.toutiao.com/',description:'bytedance'},
{
name:' Bili, Bili ',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')); // The original data index
let currentIndex = parseInt(index);// Data now index
console.log("start", startIndex);
console.log("drop", currentIndex);
if (startIndex - currentIndex > 0) {
console.log(" Index of the element to be dragged Greater than Index of the element in the current position ");
this.linkData.splice(currentIndex, 0, this.linkData[startIndex]);
console.log(" Delete " + startIndex + 1);
this.linkData.splice(startIndex + 1, 1)
} else if (startIndex - currentIndex < 0) {
console.log(" Index of the element to be dragged Less than Index of the element in the current position ");
this.linkData.splice(currentIndex + 1, 0, this.linkData[startIndex]);
this.linkData.splice(startIndex, 1)
} else {
console.log(" Nothing to do ");
}
},
// Drag events ( The main purpose is to keep the mouse cursor from being prohibited when dragging )
dragover(e) {
e.preventDefault()
},
},
}
</script>
<style lang="scss" scoped>
</style>
Reference link
https://blog.csdn.net/azuretodd/article/details/109973228
边栏推荐
- JS reverse -- ob confusion and accelerated music that poked the [hornet's nest]
- Go zero micro service practical series (IX. ultimate optimization of seckill performance)
- 公钥\私人 ssh避password登陆
- C language instance_ four
- 一起看看matlab工具箱内部是如何实现BP神经网络的
- 从零开始匹配vim(0)——vimscript 简介
- [chip scheme design] pulse oximeter
- C语言实例_2
- Transplant DAC chip mcp4725 to nuc980
- 2022 Google CTF SEGFAULT LABYRINTH wp
猜你喜欢
免费白嫖的图床对比
How to manage distributed teams?
LeetCode:1175. 质数排列
Make Jar, Not War
Clickhouse fields are grouped and aggregated, and SQL is queried according to the granularity of any time period
AI 从代码中自动生成注释文档
Today's question -2022/7/4 modify string reference type variables in lambda body
C language - array
Let's see through the network i/o model from beginning to end
一起看看matlab工具箱内部是如何实现BP神经网络的
随机推荐
Case development of landlord fighting game
数据手册中的词汇
Appium基础 — Appium Inspector定位工具(一)
swiper组件中使用video导致全屏错位
Failed to successfully launch or connect to a child MSBuild. exe process. Verify that the MSBuild. exe
Taro2.* applet configuration sharing wechat circle of friends
Transformation transformation operator
Realize incremental data synchronization between MySQL and ES
一起看看matlab工具箱内部是如何实现BP神经网络的
Comparison of picture beds of free white whoring
Gazebo的安装&与ROS的连接
[case sharing] basic function configuration of network loop detection
C language instance_ five
AcWing 1140. 最短网络 (最小生成树)
Installation of gazebo & connection with ROS
According to the analysis of the Internet industry in 2022, how to choose a suitable position?
编译命令行终端 swift
Google released a security update to fix 0 days that have been used in chrome
Spark TPCDS Data Gen
Gnet: notes on the use of a lightweight and high-performance go network framework