uniapp结合movable-area与movable-view实现拖拽功能
前言
因为公司业务开发需要拖拽功能。
ps：该功能只能针对高度一致的，如果高度不一致需要另外二开
演示
开始
<template><view style="height: 100%;"><movable-area :style="{'width': '100%', 'height': allHeight + 'px'}"><movable-viewv-for="(item, index) in list":key="item.id":x="0":y="item.y":style="{'height': itemHeight + 'px', 'width': '100%',}"direction="all"@touchstart="handleDragStart(index)"@change="handleMoving(index, $event)"@touchend="handleDragEnd"class="movable-view"><!-- 这里可以放置步骤的详细内容 --><view style="background-color: aqua; padding: 20rpx 0;">{{ item.desc }}</view></movable-view></movable-area></view>
</template><script>
export default {data() {return {list: [],cloneList: [],activeIndex: -1, // 选中oldIndex: -1,moveToIndex: -1, // 移动allHeight: 300,itemHeight: 50};},created() {for(let i = 0; i < 12; i ++) {let info = {id: i,desc: '测试' + i}this.list.push(info)}this.allHeight = 12 * this.itemHeightthis.initList(this.list)},methods: {deepCopy(source) {return JSON.parse(JSON.stringify(source));},initList(list=[]){const newList = this.deepCopy(list);this.list = newList.map((item, index) => {return {...item,y: index * this.itemHeight,key: Math.random() + index};});//拷贝一份初始list值this.cloneList = this.deepCopy(this.list);},// 拖拽开始handleDragStart(index) {this.activeIndex = index;this.oldIndex = index;},handleMoving(index, e){if (e.detail.source !== 'touch') return;const { x, y } = e.detail;const currentY = Math.floor((y + this.itemHeight / 2) / this.itemHeight);this.moveToIndex = Math.min(currentY, this.list.length - 1);//更新移动后的位置if (this.oldIndex !== this.moveToIndex && this.oldIndex !== -1 && this.moveToIndex !== -1) {const newList = this.deepCopy(this.cloneList);//交换位置newList.splice(this.moveToIndex, 0, ...newList.splice(this.activeIndex, 1));this.list.forEach((item, index) => {if (index !== this.activeIndex) {const itemIndex = newList.findIndex(val => val.id === item.id);item.y = itemIndex*this.itemHeight}});this.oldIndex = this.moveToIndex;}},handleDragEnd(e) {if (this.moveToIndex !== -1 && this.activeIndex !== -1 && this.moveToIndex !== this.activeIndex) {this.cloneList.splice(this.moveToIndex, 0, ...this.cloneList.splice(this.activeIndex, 1));}// 重新排序下更新后的位置。this.initList(this.cloneList);this.activeIndex = -1;this.oldIndex = -1;this.moveToIndex = -1;},},
};
</script><style>
.movable-area {}.movable-view {}
</style>相关文章：
uniapp结合movable-area与movable-view实现拖拽功能
前言 因为公司业务开发需要拖拽功能。 ps：该功能只能针对高度一致的，如果高度不一致需要另外二开 演示 开始 <template><view style"height: 100%;"><movable-area :style"{width: 100%, height: allHeight px}"…...
JavaScript 单例模式的创建与应用
JavaScript 单例模式的创建与应用 单例模式（Singleton Pattern）是一种设计模式，旨在确保一个类只有一个实例，并提供全局访问点。在 JavaScript 中，单例模式可以帮助我们避免多次创建同一个对象，节省资源&a…...
【HarmonyOS】 鸿蒙保存图片或视频到相册
【HarmonyOS】 鸿蒙保存图片或视频到相册 前言 鸿蒙中保存图片或者视频，或者其他媒体文件到设备的媒体库，可以是相册，也可以是文件管理等。共有两种方式： 需要应用申请受限权限，获取文件读写的权限（调用…...
windows下nacos启动报错：java.lang.unsatisfiedLinkError: C:\USers\乱码AppData\xxx.dll
问题 看了许多别的帖子，大家都是因为缺少dll包，下载安装 Microsoft Visual C 2015 Redistributable 就可以。但我试过了不行。思来想去，之前正常的时候用的JDK版本是17，后面别的项目用1.8给切换回来了。然后尝试配置环境变量将JD…...
_基本OOP知识01)
梳理你的思路(从OOP到架构设计)_基本OOP知识01
目录 1、“-Oriented” 的涵意 2、 ” -Oriented”、” -Based”、” -Driven”、” -Centered” 它们之间区别 3、 从对象(Object) 谈起 4、类的用途： 叙述软件对象 Android从程序员到架构师之路：梳理你的思路(从OOP到架构设计) 1、“-Oriented” …...
【C++图论 BFS算法】2467. 树上最大得分和路径|2053
本文涉及知识点 C图论 CBFS算法 LeetCode2467. 树上最大得分和路径 一个 n 个节点的无向树，节点编号为 0 到 n - 1 ，树的根结点是 0 号节点。给你一个长度为 n - 1 的二维整数数组 edges ，其中 edges[i] [ai, bi] ，表示节点 a…...
Java的Mvc整合Swagger的knife4框架
Swagger的介绍 Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。使用Swagger，就是把相关的信息存储在它定义的描述文件里面（yml或json格式），再通过维护这个描述 文件可以去更…...
AI项目二十六：YOLOV11简单部署测试
若该文为原创文章，转载请注明原文出处。 一、YOLOv11介绍 继YOLOv 8、YOLOv 9和YOLOv10之后，发布的YOLOV11引入了几个突破性的增强功能，为目标检测和计算机视觉设定了新的基准。 增强的特征提取：YOLOv11使用改进的主干和颈部架构…...
19. Three.js案例-创建一个带有纹理映射的旋转平面
19. Three.js案例-创建一个带有纹理映射的旋转平面 实现效果 知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它利用 WebGL 技术在浏览器中绘制 3D 图形。 构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersobj…...
【Makefile】编译日志之输出重定向符号 ＞
用法1 make all >& compilelog.txt make all > compilelog.txt这两个编译命令在功能上有一些细微的区别，主要在于标准输出和标准错误的处理方式。 make all >& compilelog.txt 这个命令会将标准输出（stdout）和标准错误&a…...
TDengine 新功能 复合主键
1. 简介 从 TDengine 3.3.0.0 版本之后，新增了复合主键的功能。 TDengine 原来的时间列是不允许有重复时间戳的，有了复合主键功能后，时间列即允许有重复，重复后的时间戳按紧跟其后第二列主键列的值来确定唯一性。 此功能的常用…...
【OpenHarmony】初识设备间互联互通的统一基础：分布式软总线
分布式软总线 前言软总线软总线代码目录软总线传输模块概述传输模块主要对外接口和使用方式 前言 很久没有写出一篇能够分享出来的学习心得了，零零散散地写了好多，总是不太满意。今年8月份开始正式投入精力去学习open harmony，记得第一次接触…...
yocto加软件包install 动态链接库报错
加入bb文件,编译通过 在install时报错 报错 ERROR: demo-1.0-r0 do_package_qa: QA Issue: -dev package agent-dev contains non-symlink .so ‘/usr/lib64/libdemo.so’ 解决 在bb文件install前加2行 SOLIBS ".so" FILES_SOLIBSDEV ""do_install …...
《数据结构》（408代码题）
2009 单链表（双指针） 分析：首先呢，给我们的数据结构是一个带有表头结点的单链表，也不允许我们改变链表的结构。链表的长度不是直接给出的啊，所以这个倒数也很棘手。那我们该如何解决这个“k”呢，…...
哈希表的完善及unordered_map/unordered_set封装
1.哈希表的完善 1.1 优化：哈希函数 在实际使用中，往往需要以字符串作为存储依据(键值)，比如姓名与快递信息、商品名称与价格、中文单词与英文释义等。 而在上一篇文章中，我们实现的哈希表只考虑了整型的存储情况，即直…...
“物联·数据·产融·场景”聚力垂直数智场景下的新质生产力破局
人工智能、物联网（简称AIOT）正在深刻改变世界的经济格局，对各行各业产生深厚的影响。12月6日，由深圳市物联网协会、华夏银行深圳分行、深圳市区块链技术应用协会、深圳市康复辅助器具智能技术应用协会联合主办的第五届AIOT生态大会…...
API接口的性能测试与优化策略
在现代软件开发中，API（应用程序编程接口）扮演着至关重要的角色，它们作为不同服务之间的桥梁，确保数据的顺畅流通与交互。然而，随着用户需求的不断增长和系统复杂性的提升，API接口的性能问题日益…...
【Vue】Part4 接口调用
接口调用方式 原生ajax基于jQuery的ajaxfetchaxios 异步 JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，…...
管理系统前端框架开发案例学习
一、 需求分析 本案例的主要目标是开发一个智能学习辅助系统的前端界面，涵盖以下功能模块： 首页：显示系统的总体概览和关键功能介绍。 班级学员管理：实现班级管理和学员管理。 系统信息管理：管理部门和员工信息。 …...
协程设计原理与实现
协程设计原理与汇编实现 同步与异步 对于任何一个事情，都可以划分为不同的步骤。所谓同步，就先做第一个事情，按照这件事的步骤完成这件事之后，再去做第二件事。再去做第三件事，以此类推。 异步就是，可以…...
c++广播通讯的实现
概念大家都很清楚，不赘述。 广播必然用UDP这套东西。 setsockopt() 函数及其在广播中的应用： 在 C 网络编程中，setsockopt() 函数用于设置套接字选项，这些选项可以控制套接字的各种行为。对于广播通信，我们特别关心…...
Leetcode 3377. Digit Operations to Make Two Integers Equal
Leetcode 3377. Digit Operations to Make Two Integers Equal 1. 解题思路2. 代码实现 题目链接：3377. Digit Operations to Make Two Integers Equal 1. 解题思路 这一题的核心思路属于路径遍历问题，我们使用一个堆排来控制最优路径的选择。 我们首…...
高项 - 项目管理原则与项目绩效域
个人总结，仅供参考，欢迎加好友一起讨论 博文更新参考时间点：2024-12 高项 - 章节与知识点汇总：点击跳转 文章目录 高项 - 项目管理原则与项目绩效域项目管理12条原则原则1：成为勤勉、尊重和关心他人的管家 (p202)原则…...
【开源】A065—基于SpringBoot的库存管理系统的设计与实现
🙊作者简介：在校研究生，拥有计算机专业的研究生开发团队，分享技术代码帮助学生学习，独立完成自己的网站项目。 代码可以查看项目链接获取⬇️，记得注明来意哦~🌹 赠送计算机毕业设计600个选题ex…...
LeetCode—189. 轮转数组（中等）
题目描述： 给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。 示例1： 输入: nums [1,2,3,4,5,6,7], k 3输出:[5,6,7,1,2,3,4] 解释: 向右轮转 1 步:[7,1,2,3,4,5,6] 向右轮转 2 步:[6,7,1,2,3,4,5] 向…...
fastadmin框架同时使用 阿里云oss和阿里云点播
背景 项目的实际需求中既要用到阿里云oss产品又用到阿里云点播系统，实现完美的统一。设置两个地址downUrl，thirdCode。分别代表阿里云oss上传路径和阿里云点播系统vId。 实现 默认框架你已经集成好阿里云oss集成工作，前端html页面实现 <…...
MySQL-DML之数据表操作
文章目录 一. 插入表记录1. 向表中插入部分字段2. 向表中插入所有字段,字段的顺序为创建表时的顺序3. 一次添加多条数据信息 二. 更新表记录1. 更新所有记录的指定字段 更新符号条件记录的指定字段2. 更新符号条件记录的指定字段 三. 删除表记录1. 按条件删除记录2. 清空记录 四…...
Android 逆向/反编译/Hook修改应用行为 基础实现
前言：本文通过一个简单的情景案例实现安卓逆向的基本操作 一、情景描述 本文通过一个简单的情景案例来实现安卓逆向的基本操作。在这个案例中所使用的项目程序是我自己的Demo程序，不会造成任何的财产侵害，本文仅作为日常记录及案例分享。实…...
【前端】理解 JavaScript 对象属性访问的复杂性
博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 💯前言💯理论基础：JavaScript 对象属性的访问模式1. 点符号访问（Dot Notation）2. 方括号访问（Bracket Notation）点符号…...
进入 Dystopia：第九周游戏指南
本指南将为大家详细说明在第八周的每个体验中可以获得的奖励。 在杂草丛生的反乌托邦废墟中生存，随着大自然重新开垦这片土地，文明已陷入绝望。穿越高耸入云、摇摇欲坠的摩天大楼，抵御末世社会的各种危险。适应这个文明与荒野之间的界限已经消…...
Helm安装Mysql8主从复制集群
目录 一、Helm安装 二、安装mysql 1、拉取镜像 2、修改配置文件 3、创建mysql-secret 4、安装 一、Helm安装 这里不再赘叙，具体安装请参考官网 Helm | 快速入门指南 二、安装mysql 1、拉取镜像 #添加仓库 helm repo add bitnami https://charts.bitnami.c…...
[小白系列]GPU-nvidia-smi指令
nvidia-smi（NVIDIA System Management Interface）是一种命令行实用程序，用于监控和管理NVIDIA GPU（图形处理器）的状态和性能。它提供了一种简单而强大的方式来获取有关GPU的实时信息，并且可以用于诊断、…...
Flutter 图片编辑板（一） 事件路由
一个图片编辑板，有两部分组成。编辑板和内容项。每一个内容项是被InteractiveViewer修饰的widget，具有缩放偏移的功能。 在图片编辑板上， 会有多个内容相，图片或文字（添加文字目前还没做过）。 当要编辑其中…...
Cherno C++学习笔记 P33 字符串的字面量
在这篇文章当中我们介绍一下有关于字符串更加深入的知识，也就是字符串的字面量。 首先什么是字面量？其实也很简单，就是双引号里面的那一坨，其实就是字面量，我们举一个最简单的例子： #include<iostream…...
数据结构 （36）各种排序方法的综合比较
一、常见排序方法分类 插入排序类 直接插入排序：通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。希尔排序：是插入排序的一种改进版本，先将整个待排序的记录序列分割成为…...
Master EDI 项目需求分析
Master Electronics 通过其全球分销网络，支持多种采购需求，确保能够为客户提供可靠的元件供应链解决方案，同时为快速高效的与全球伙伴建立合作，Master 选择通过EDI来实现与交易伙伴间的数据传输。 EDI为交易伙伴之间建立了一个安…...
java+ssm+mysql计算机等级考试网
项目介绍： 使用javassmmysql开发的计算机等级考试信息网，系统包含前后台，包含超级管理员，系统管理员角色，功能如下： 前台：首页；考试动态；相关资源下载；考试…...
MitelMiCollab 身份绕过导致任意文件读取漏洞复现（CVE-2024-41713）
0x01 产品描述： Mitel MiCollab 是一个企业协作平台，它将各种通信工具整合到一个应用程序中，提供语音和视频通话、消息传递、状态信息、音频会议、移动支持和团队协作功能。0x02 漏洞描述： Mitel MiCollab 的 NuPoint 统一消息 (NPM) 组件中存在身份验证绕过漏洞，由于输入…...
【Python]深入Python日志管理：从logging到分布式日志追踪的完整指南
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 日志是软件开发中的核心部分，尤其在分布式系统中，日志对于调试和问题定位至关重要。本篇文章将从Python标准库的logging模块出发，逐步探讨日志管理的最佳实践，涵盖日志配置、日志分层、日志格式化等基…...
python rstrip 的迷惑行为
在项目中，我需要把字符串末尾的一部分去掉，类似截断，我用ide的随笔提示，发现了rstrip这个方法，然后我试了下，满足我的需求，但在测试过程中，我发现了rstrip的一些行为很让我迷惑。 开…...
SPI通信协议
SPI通信协议 简介通信原理通信原理SPI数据通信的流程可以分为以下几步：通信特性设备时钟时钟速率时钟极性跟相位SPI协议层通讯流程详解优点：缺点： DS1302 时钟实验控制寄存器日历、时钟寄存器寄存器说明 DS1302 读写时序软件功能实现 简介 SP…...
vue中如何实现商品多规格添加（后台商城管理系统）
在制作商城类的后台管理系统中会遇到多规格商品的添加，需要向固定的数组内添加，通过查看数据结构正确的向数组中添加数据。 如图： 功能需求：1.每次点击添加新规格时，批量设置会多出来一行表格和一个标题输入框。 最…...
智创 AI 新视界 -- AIGC 重塑广告行业的创新力量（16 - 7）
💖💖💖亲爱的朋友们，热烈欢迎你们来到 青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...
Runloop
假设你的项目中有关tableView，然后还有一个定时器timer在执行，定时器代码如下： var num 0override func viewDidLoad() {super.viewDidLoad()let timer Timer(timeInterval: 1,target: self,selector: #selector(self.run),userInfo: nil,r…...
代码随想录第40天
121. 买卖股票的最佳时机 class Solution:def maxProfit(self, prices: List[int]) -> int:cost, profit float(inf), 0for price in prices:cost min(cost, price)profit max(profit, price - cost)return profit122.买卖股票的最佳时机II class Solution:def maxPr…...
element plus table组件多选获取数据id
首先给table加上 selection-change"handleSelectionChange"事件 示例 <el-table selection-change"handleSelectionChange" stripe:data"data?.slice((currentPage3 - 1) * pageSize3, currentPage3 * pageSize3)" style"width: 100%…...
自动驾驶：百年演进
亲爱的小伙伴们😘，在求知的漫漫旅途中，若你对深度学习的奥秘、JAVA 、PYTHON与SAP 的奇妙世界，亦或是读研论文的撰写攻略有所探寻🧐，那不妨给我一个小小的关注吧🥰。我会精心筹备，在…...
STM32 了解OLED
内容扩展 调试方式串口调试：通过串口调试，将调试信息发送到电脑端，电脑使用串口助手显示调试信息 显示屏调试：直接将显示屏连接到单片机，将调试信息打印到显示屏上 keil调试模式：借助Keil软件的调试模式&a…...
NanoLog起步笔记-7-log解压过程初探
nonolog起步笔记-6-log解压过程初探 再看解压过程建立调试工程修改makefile添加新的launch项 注：重新学习nanolog的README.mdPost-Execution Log Decompressor 下面我们尝试了解，解压的过程，是如何得到文件头部的meta信息的。 再看解压过程 …...
python连接redis详细步骤
1.下载并安装windows python Window 平台安装 Python: 以下为在 Window 平台上安装 Python 的简单步骤。 打开 WEB 浏览器访问 Python Releases for Windows | Python.org ： 记得勾选 Add Python 3.6 to PATH。 在cmd 执行pip install redis 2.编辑python代码…...