vue拖拽div盒子实现上下拖动互换
vue拖拽div盒子实现上下拖动互换
<div v-for="(item, index) in formList" :key="index" draggable="true"@dragstart="handleDragStart($event, item)"@dragenter="handleDragEnter($event, item)"@dragover.prevent="handleDragover($event, item)"@drop="handleDrop($event, item)"@dragend="handleDragEnd($event, item)">{{item.title}}
</div>
<script>
export default {data () {return {formList: [{ type:0,title: 'jwq'},{ type:1,title: 'zhn'},{ type:2,title: 'zzz'}],dragging: null}
},
methods: {// 当元素被拖动时handleDragStart(e, item) {this.dragging = item},// 当被鼠标拖动的对象进入其容器范围内时触发此事件handleDragEnter(e) {// 为需要移动的元素设置dragstart事件e.dataTransfer.effectAllowed = 'move'},// 当某被拖动的对象在另一对象容器范围内拖动时触发此事件handleDragover(e) {// 首先把div变成可以放置的元素,即重写dragenter/dragover// 在dragenter中针对放置目标来设置!e.dataTransfer.dropEffect = 'move'},// 当放置被拖元素时handleDrop(e, item) {e.dataTransfer.dropEffect = 'move'if(item === this.dragging){return}const newItems = [...this.formList]const from = newItems.indexOf(this.dragging)const to = newItems.indexOf(item)newItems[from] = itemnewItems[to] = this.draggingthis.formList = newItems},// 完成元素拖动后触发handleDragEnd() {this.dragging = null}
}}
</script>


相关文章:
vue拖拽div盒子实现上下拖动互换
vue拖拽div盒子实现上下拖动互换 <div v-for"(item, index) in formList" :key"index" draggable"true"dragstart"handleDragStart($event, item)"dragenter"handleDragEnter($event, item)"dragover.prevent"han…...
Visual Studio 2022 右键单击项目没有出现View | View Class Diagram(Visual Studio 无法使用类设计器)
文章目录 问题描述原因.NET Core项目.NET Framework项目 问题描述 当我们在Solution Explorer窗口右键单击项目时,快捷菜单中没有出现“查看”,或者出现了“查看”,但是“查看”里没有View Class Diagram。 原因 首先你要确保你安装了类设…...
EFCore常见用法
EFCore官方文档置顶,看这个就行。下面的内容只是总结,算是备忘录。 一、创建和删除 //1、创建数据库和表 db.Database.EnsureCreated();//将创建数据库(如果不存在)并初始化数据库架构。 如果存在任何表 (包括另一 DbContext 类)…...
概率论与数理统计:第六章:数理统计
文章目录 Ch6. 数理统计(一) 总体与样本(二) 统计量 (5个)2.5个常用统计量3.矩的概念 (三) 抽样分布 (3个)0.上α分位点1.χ分布2.t分布3.F分布 (四) 抽样分布定理1.单个正态总体2.两个正态总体 Ch6. 数理统计 (一) 总体与样本 1.概念: (1)总体 (2)样本 简单随机…...
拥塞控制(TCP限制窗口大小的机制)
拥塞控制机制可以使滑动窗口在保证可靠性的前提下,提高传输效率 关于滑动窗口的属性以及部分机制推荐看TCP中窗口和滑动窗口的含义以及流量控制 拥塞控制出现的原因 看了上面推荐的博客我们已经知道了,由于接收方接收数据的能力有限,所以要通…...
校园供水系统智能管理
import pandas as pd data1pd.read_excel("C://Users//JJH//Desktop//E//附件_一季度.xlsx") data2pd.read_excel("C://Users//JJH//Desktop//E//附件_二季度.xlsx") data3pd.read_excel("C://Users//JJH//Desktop//E//附件_三季度.xlsx") data4…...
Flask-SocketIO和Flask-Login联合开发socketio权限系统
设置 Flask, Flask-SocketIO, Flask-Login: 首先,确保安装了必要的库: pip install Flask Flask-SocketIO Flask-Login基础设置: from flask import Flask, render_template, redirect, url_for, request from flask_socketio import SocketIO, emit from flask_…...
航空电子设备中的TSN通讯架构—直升机
前言 以太网正在迅速取代传统网络,成为航空电子设备和任务系统的核心高速网络。本文提出了以太网时间敏感网络(TSN)在航空电子设备上应用的技术优势问题。在实际应用中,TSN已成为一个具有丰富的机制和协议的工具箱,可满足与时间和可靠性相关…...
elment-ui中使用el-steps案例
el-steps案例 样式 代码 <div class"active-box"><div class"active-title">请完善</div><el-steps :active"active" finish-status"success" align-center><el-step title"第一步" /><…...
FPGA解析串口指令控制spi flash完成连续写、读、擦除数据
前言 最近在收拾抽屉时找到一个某宝的spi flash模块,如下图所示,我就想用能不能串口来读写flash,大致过程就是,串口向fpga发送一条指令,fpga解析出指令控制flah,这个指令协议目前就是: 55 AA …...
msvcp120.dll丢失的解决方法,分享三种快速修复的方法
今天,我将和大家分享一个关于电脑问题的解决方法——msvcp120.dll丢失的解决方法。希望对大家有所帮助。 首先,让我们来了解一下msvcp120.dll文件。msvcp120.dll是Microsoft Visual C 2010 Redistributable Package的一个组件,它包含了一些运…...
mysql 8.0 窗口函数 之 序号函数 与 sql server 序号函数 一样
sql server 序号函数 序号函数 ROW_NUMBER() 顺序排序RANK() 并列排序,会跳过重复的序号,比如序号为1,1,3DENSE_RANK() 并列排序,不会跳过重复的序号,比如 序号为 1,1,2 语法结构…...
fastgpt构建镜像
1.把client目录复制到服务器 .next和node_modules文件夹不用上传到服务器 在服务器目录运行 docker build -t fastgpt:1.0.3 . 构建服务 再运行 docker ps 就可以看到容器了...
Git笔记--分支常用命令
目录 1--git branch -v 2--git branch 3--git checkout 4--git merge 1--git branch -v git branch -v git branch -v 用于查看分支版本; 2--git branch git branch xxxxx # xxxxx表示分支名 git branch 用于创建分支; 3--git checkout git check…...
常见设计模式学习+面试总结
一 设计模式简介 二 面试总结 1 什么是单例模式?都有哪些地方用到单例? 内存中只会创建且仅创建一次对象的设计模式,保证一个类只有一个实例,并且提供一个访问该全局访问点。 应用场景: 网站的计数器,一般…...
sql解决取多个截至每个月的数据
问题:需要查询1月、1-2月、1-3月… 1-12月,分区间的累计数据,在同一个sql语句里面实现。 多个分开查询效率不高,并且数据手动合并麻烦。 with t1 as ( SELECT *,CASE WHEN insutype 390 THEN 居民 ELSE 职工 END 人员类别,SUBST…...
数据采集:selenium 获取 CDN 厂家各省市节点 IP
写在前面 工作需要遇到,简单整理理解不足小伙伴帮忙指正 对每个人而言,真正的职责只有一个:找到自我。然后在心中坚守其一生,全心全意,永不停息。所有其它的路都是不完整的,是人的逃避方式,是对…...
【el-tree】树形组件图标的自定义
饿了么树形组件的图标自定义 默认样式: 可以看到el-tree组件左侧自带展开与收起图标,咱们可以把它隐藏:: .groupList {::v-deep .el-tree-node { .el-icon-caret-right {display: none;} } } 我的全部代码 <div class"groupList"><el…...
UltralSO软碟通制作Linux系统盘
第一步: 下载镜像 阿里云下载地址:https://mirrors.aliyun.com/centos-vault/ 按照需求选择系统版本,我这要求安装CentOS7.5的系统,我以CentOS7.5为例 第二步: 下载UltralSO软件 官网下载地址:https://cn.…...
yolov8训练心得 持续更新
目录 优化器 lion优化器,学习率0.0001,训练效果: 学习率衰减 600个batch衰减0.7,发现效果较好...
如何在Windows上轻松安装APK文件?APK Installer完整指南
如何在Windows上轻松安装APK文件?APK Installer完整指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 还在为Windows上安装安卓应用而烦恼吗?…...
Claude Code配置切换器:一键管理多AI服务环境变量
1. 项目概述:为什么我们需要一个Claude Code的配置切换器如果你和我一样,日常重度依赖Claude Code这个AI编程助手,那你肯定遇到过这个场景:今天想用智谱的GLM-4.5,明天想切到月之暗面的Kimi,后天可能又得用…...
2026 年全球网络安全威胁态势与关键技术防御研究
摘要 本文基于 Security Affairs 2026 年第 576 期安全通讯披露的最新网络攻击事件与漏洞情报,系统分析 Linux 无文件远控、内核提权、AI 供应链投毒、钓鱼攻击工业化、关键信息基础设施入侵等新型威胁的技术机理、传播路径与危害特征。研究结合 Quasar Linux RAT、…...
别再花钱买板卡了!手把手教你用NI-MAX虚拟PCI6224玩转LabVIEW数字IO
零成本玩转LabVIEW数字IO:NI-MAX虚拟设备全攻略 在工程教育与原型开发领域,硬件成本往往是阻碍学习进程的第一道门槛。一块标准的NI PCI-6224数字IO板卡市场价超过万元,而学生和独立开发者可能需要反复实验数十次才能掌握基础操作。但鲜为人知…...
DoL-Lyra游戏增强工具新手入门
DoL-Lyra游戏增强工具新手入门 【免费下载链接】DOL-CHS-MODS Degrees of Lewdity 整合 项目地址: https://gitcode.com/gh_mirrors/do/DOL-CHS-MODS DoL-Lyra游戏增强工具是一款专为Degrees of Lewdity游戏设计的完整整合方案,集成了最新汉化补丁、视觉增强…...
AzurLaneAutoScript:碧蓝航线终极自动化解决方案
AzurLaneAutoScript:碧蓝航线终极自动化解决方案 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研,全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript 还在为碧蓝航线…...
构建本地语音智能体:基于Go与OpenClaw的实时交互系统
1. 项目概述:一个能听懂你说话的本地智能体伙伴如果你和我一样,对传统的、需要打字输入、反应迟缓的AI助手感到厌倦,总幻想着能有一个像电影《Her》里Samantha那样的智能伙伴,能用最自然的语音与你交流,甚至能帮你执行…...
Midjourney V6水彩模式突然失效?紧急修复方案:3个隐藏--style参数+2个替代性sref锚点+1键重置工作流
更多请点击: https://intelliparadigm.com 第一章:Midjourney V6水彩模式失效的真相溯源 Midjourney V6 发布后,大量用户反馈 --style watercolor 参数不再触发预期的水彩渲染效果,生成图像趋于写实或默认风格。这一现象并非 UI …...
如何高效解密华为光猫配置文件:终极操作指南
如何高效解密华为光猫配置文件:终极操作指南 【免费下载链接】HuaWei-Optical-Network-Terminal-Decoder 项目地址: https://gitcode.com/gh_mirrors/hu/HuaWei-Optical-Network-Terminal-Decoder 还在为无法读取华为光猫加密配置文件而烦恼吗?网…...
Spring Boot 2026教育技术演示项目全栈架构与工程实践解析
1. 项目概述:一个面向未来的教育技术演示 最近在整理开源项目时,我注意到了 holzerjm/GACEP-Spring-2026-demo 这个仓库。乍一看,这个标题信息量不小,它像是一个技术演示,但前缀 GACEP 和 Spring-2026 又透露出…...
