当前位置: 首页 > news >正文

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>

image-20230825163530766

image-20230825163657773

相关文章:

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窗口右键单击项目时&#xff0c;快捷菜单中没有出现“查看”&#xff0c;或者出现了“查看”&#xff0c;但是“查看”里没有View Class Diagram。 原因 首先你要确保你安装了类设…...

EFCore常见用法

EFCore官方文档置顶&#xff0c;看这个就行。下面的内容只是总结&#xff0c;算是备忘录。 一、创建和删除 //1、创建数据库和表 db.Database.EnsureCreated();//将创建数据库&#xff08;如果不存在&#xff09;并初始化数据库架构。 如果存在任何表 (包括另一 DbContext 类)…...

概率论与数理统计:第六章:数理统计

文章目录 Ch6. 数理统计(一) 总体与样本(二) 统计量 (5个)2.5个常用统计量3.矩的概念 (三) 抽样分布 (3个)0.上α分位点1.χ分布2.t分布3.F分布 (四) 抽样分布定理1.单个正态总体2.两个正态总体 Ch6. 数理统计 (一) 总体与样本 1.概念&#xff1a; (1)总体 (2)样本 简单随机…...

拥塞控制(TCP限制窗口大小的机制)

拥塞控制机制可以使滑动窗口在保证可靠性的前提下&#xff0c;提高传输效率 关于滑动窗口的属性以及部分机制推荐看TCP中窗口和滑动窗口的含义以及流量控制 拥塞控制出现的原因 看了上面推荐的博客我们已经知道了&#xff0c;由于接收方接收数据的能力有限&#xff0c;所以要通…...

校园供水系统智能管理

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: 首先&#xff0c;确保安装了必要的库: 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通讯架构—直升机

前言 以太网正在迅速取代传统网络&#xff0c;成为航空电子设备和任务系统的核心高速网络。本文提出了以太网时间敏感网络(TSN)在航空电子设备上应用的技术优势问题。在实际应用中&#xff0c;TSN已成为一个具有丰富的机制和协议的工具箱&#xff0c;可满足与时间和可靠性相关…...

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模块&#xff0c;如下图所示&#xff0c;我就想用能不能串口来读写flash&#xff0c;大致过程就是&#xff0c;串口向fpga发送一条指令&#xff0c;fpga解析出指令控制flah&#xff0c;这个指令协议目前就是&#xff1a; 55 AA …...

msvcp120.dll丢失的解决方法,分享三种快速修复的方法

今天&#xff0c;我将和大家分享一个关于电脑问题的解决方法——msvcp120.dll丢失的解决方法。希望对大家有所帮助。 首先&#xff0c;让我们来了解一下msvcp120.dll文件。msvcp120.dll是Microsoft Visual C 2010 Redistributable Package的一个组件&#xff0c;它包含了一些运…...

mysql 8.0 窗口函数 之 序号函数 与 sql server 序号函数 一样

sql server 序号函数 序号函数 ROW_NUMBER() 顺序排序RANK() 并列排序&#xff0c;会跳过重复的序号&#xff0c;比如序号为1&#xff0c;1&#xff0c;3DENSE_RANK() 并列排序&#xff0c;不会跳过重复的序号&#xff0c;比如 序号为 1&#xff0c;1&#xff0c;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 用于查看分支版本&#xff1b; 2--git branch git branch xxxxx # xxxxx表示分支名 git branch 用于创建分支&#xff1b; 3--git checkout git check…...

常见设计模式学习+面试总结

一 设计模式简介 二 面试总结 1 什么是单例模式&#xff1f;都有哪些地方用到单例&#xff1f; 内存中只会创建且仅创建一次对象的设计模式&#xff0c;保证一个类只有一个实例&#xff0c;并且提供一个访问该全局访问点。 应用场景&#xff1a; 网站的计数器&#xff0c;一般…...

sql解决取多个截至每个月的数据

问题&#xff1a;需要查询1月、1-2月、1-3月… 1-12月&#xff0c;分区间的累计数据&#xff0c;在同一个sql语句里面实现。 多个分开查询效率不高&#xff0c;并且数据手动合并麻烦。 with t1 as ( SELECT *,CASE WHEN insutype 390 THEN 居民 ELSE 职工 END 人员类别,SUBST…...

数据采集:selenium 获取 CDN 厂家各省市节点 IP

写在前面 工作需要遇到&#xff0c;简单整理理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整的&#xff0c;是人的逃避方式&#xff0c;是对…...

【el-tree】树形组件图标的自定义

饿了么树形组件的图标自定义 默认样式: 可以看到el-tree组件左侧自带展开与收起图标,咱们可以把它隐藏:: .groupList {::v-deep .el-tree-node { .el-icon-caret-right {display: none;} } } 我的全部代码 <div class"groupList"><el…...

UltralSO软碟通制作Linux系统盘

第一步&#xff1a; 下载镜像 阿里云下载地址&#xff1a;https://mirrors.aliyun.com/centos-vault/ 按照需求选择系统版本&#xff0c;我这要求安装CentOS7.5的系统&#xff0c;我以CentOS7.5为例 第二步&#xff1a; 下载UltralSO软件 官网下载地址&#xff1a;https://cn.…...

yolov8训练心得 持续更新

目录 优化器 lion优化器,学习率0.0001,训练效果: 学习率衰减 600个batch衰减0.7,发现效果较好...

20 鸿蒙LiteOS信号量原理实战:信号量作用、MAX_COUNT含义、线程同步源码解析

鸿蒙LiteOS信号量原理实战&#xff1a;信号量作用、MAX_COUNT含义、线程同步源码解析 一、前言 本文基于小凌派 RK2206鸿蒙LiteOS标准示例代码&#xff0c;从零讲解LiteOS内核信号量核心概念&#xff1a;为什么需要信号量、信号量能干什么、MAX_COUNT参数真实含义&#xff0c…...

企业内如何通过 Taotoken 实现 API 访问权限的精细化控制与审计

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 企业内如何通过 Taotoken 实现 API 访问权限的精细化控制与审计 当企业将大模型能力引入内部工作流时&#xff0c;如何安全、可控地…...

计算机视觉入门:从OpenCV到PyTorch的实践指南

1. 项目概述&#xff1a;从“萌芽”到“入行”的视觉之旅 “对计算机视觉的萌芽迷恋”——这个标题精准地捕捉了无数技术爱好者&#xff0c;包括我自己&#xff0c;最初踏入这个领域时的心路历程。它描述的是一种状态&#xff1a;你或许被一张AI生成的艺术图片所震撼&#xff…...

大模型“开源”迷思:小白与程序员必看,收藏这份避坑指南!

大模型“开源”并非简单代码开放&#xff0c;涉及权重、数据、训练方法等多维度。文章详解不同协议&#xff08;如MIT、Apache-2.0、GPL、AGPL等&#xff09;对企业商业化的影响&#xff0c;强调理解协议边界至关重要。从开放权重到真正开源&#xff0c;企业需关注协议对商用、…...

AI如何重塑科学创新:从构思成本坍塌到知识组合爆炸

1. 科学创新的范式转移&#xff1a;从“不确定性”到“风险”在过去的科研实践中&#xff0c;我们常常面临一个根本性的困境&#xff1a;不确定性。这并非指我们不知道某个实验的结果&#xff0c;而是指我们连可能的结果是什么、其发生的概率有多大&#xff0c;都无从知晓。这就…...

抖音无水印下载神器:3分钟实现高效批量下载的完整指南

抖音无水印下载神器&#xff1a;3分钟实现高效批量下载的完整指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback suppo…...

AI专著生成神器登场!快速输出20万字专著,写作不用愁!

学术专著写作困境与AI工具的崛起 对于许多学术研究者来说&#xff0c;撰写学术专著时面临的最大挑战&#xff0c;无疑是“有限的精力”和“无穷的需求”之间的矛盾。撰写专著通常需要三到五年&#xff0c;甚至更长时间&#xff0c;而研究者还需平衡教学、科研项目和学术交流等…...

2026年度能耗监测系统的深度分析与展望

在当前全球可持续发展的大背景下&#xff0c;能耗监测系统的重要性愈发凸显。随着技术的进步和社会对节能减排的需求&#xff0c;2026年度的能耗监测系统将迎来一场技术革命和应用升级。本文将从市场需求、技术现状、未来发展方向及实施策略等多个方面&#xff0c;对2026能耗监…...

别再折腾源码编译了!Ubuntu 20.04下用apt-get一键安装Asterisk PBX(附SIP账号配置详解)

别再折腾源码编译了&#xff01;Ubuntu 20.04下用apt-get一键安装Asterisk PBX&#xff08;附SIP账号配置详解&#xff09; 如果你正在寻找一种快速搭建企业级电话系统的方法&#xff0c;那么Asterisk PBX绝对值得考虑。作为开源PBX领域的标杆&#xff0c;Asterisk提供了完整的…...

Windows安卓应用安装神器:APK Installer完整使用指南

Windows安卓应用安装神器&#xff1a;APK Installer完整使用指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 还在为Windows电脑无法运行安卓应用而烦恼吗&#xff…...