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

uni-app使用movable-area 实现数据的拖拽排序功能

文档地址

template部分
<movable-area :style="getAreaStyle"><movable-view class="table-row" v-for="v,i in move.list":key="v.id":y="v.y"@change="handle_moving"direction="vertical"@touchstart="handle_dragstart(i,v)" @touchend="handle_dragend(i,v)"@longpress="handleLongpress(v)" :disabled="move.disabled"><view class="table-cell">{{i+1}}</view><view class="table-cell">选择物料</view></movable-view>
</movable-area>
.table-cell,.table-row{height:50rpx;
}
.table-row{width:100%;display: flex;
}
.table-cell{width:200rpx;
}

 注意使用movable-area时需要设置高度和宽度 否则默认10

js部分
const move = reactive({list:[],disabled: true,activeIndex: -1,moveToIndex: -1,oldIndex: -1,tempDragInfo: {y: ''},cloneList: [],longpress: true,})// 获取位置const getPosition_y = (index) => {return index * 25}const getAreaStyle = computed(() => {return {width: '100%',height: move.list.length * 25 + 'px'}})// 初始化列表const initList = (list = []) => {const newList = JSON.parse(JSON.stringify(list));move.list = newList.map((item, index) => {return {...item,y: getPosition_y(index)}})move.cloneList = JSON.parse(JSON.stringify(move.list));}// 开始拖拽const handle_dragstart = (i,v) => {if(!v.id){return false;}move.activeIndex = i;move.oldIndex = i;}// 拖拽结束const handle_dragend = (i,v) => {if(!v.id){return false;}if (move.disabled) return;if (move.moveToIndex != -1 && move.activeIndex != -1 && move.activeIndex != move.moveToIndex) {move.cloneList.splice(move.moveToIndex, 0, ...move.cloneList.splice(move.activeIndex, 1));} else {move.list[move.activeIndex]['y'] = move.tempDragInfo.y;}initList(move.cloneList)move.activeIndex = -1;move.oldIndex = -1;move.moveToIndex = -1;move.disabled = true;}// 移动const handle_moving = (e) => {console.log({e})if (e.detail.source !== 'touch') return;let y = e.detail.y;move.tempDragInfo.y = y;const currentY = Math.floor((y + 12.5) / 25)move.moveToIndex = Math.min(currentY, move.list.length - 1);if (move.oldIndex != move.moveToIndex && move.oldIndex != -1 && move.moveToIndex != -1) {const newList = JSON.parse(JSON.stringify(move.cloneList));let splicItem = newList.splice(move.activeIndex, 1)[0]newList.splice(move.moveToIndex, 0, splicItem);move.list.forEach((item, index) => {if (index != move.activeIndex) {const itemIndex = newList.findIndex(val => val?.id === item?.id);item['y'] = getPosition_y(itemIndex);}});move.oldIndex = move.moveToIndex;}}const handleLongpress = (v) => {if(!v.id){return false}move.disabled = false;}

 

相关文章:

uni-app使用movable-area 实现数据的拖拽排序功能

文档地址 template部分 <movable-area :style"getAreaStyle"><movable-view class"table-row" v-for"v,i in move.list":key"v.id":y"v.y"change"handle_moving"direction"vertical"touchst…...

如何设置使PPT的画的图片导出变清晰

PPT画的流程图另存为图片 插入WORD不清晰的解决办法&#xff1a; 第一步&#xff1a;先调整PPT分辨率 根据此链接修改PPT默认的导出dpi 第二步&#xff1a;新建PPT准备 首先看想要保存的图的尺寸&#xff1a;点击图形-格式-长宽 新建一个ppt-设计-幻灯片大小-自定义大小 …...

和鲸科技 CEO 范向伟受邀揭牌启动南京大学 2024 级大学生人工智能素养大赛

2024 年 10 月 26 日&#xff0c;南京大学第十九届读书节在仙林校区图书馆举行开幕仪式。中国科学院院士、南京大学校长谈哲敏&#xff0c;校党委常委、副校长索文斌&#xff0c;原副校长、关工委主任闵铁军出席仪式&#xff0c;南京大学相关学院和职能部处负责人&#xff0c;以…...

NewStarCTF2024-Week4-Web-WP

目录 1、blindsql2 2、chocolate 3、隐藏的密码 4、ezcmsss 题目对勇师傅来说已经是开始上难度了所以这周没有AK 分享下自己做出来的题的解题思路 1、blindsql2 原本是在继续构造新的 payload&#xff0c;也测到了延时 打算去改上周的脚本&#xff0c;结果去跑的时候忘了将…...

Java学习Day56:暴打舔狗!(SpringBoot)

1.springboot简介 核心能力&#xff1a;Spring容器、日志、自动配置AutoCongfiguration、Starters web应用的能力&#xff1a;MVC、嵌入式Web服务器 数据访问(持久化)&#xff1a;关系型数据库、非关系型数据库 强大的整合其他技术的能力 只要是Java中牛逼的技术&#xff0c…...

RSA加密算法实现

Java实现RSA加密算法示例,包括密钥对的生成、加密和解密过程。首先需要导入Java的加密库,这些功能主要通过java.security和javax.crypto包提供。先生成了一个RSA密钥对,包括一个公钥和一个私钥。然后使用公钥加密了一个字符串,并使用私钥解密了加密后的字符串。加密和解密的…...

大数据新视界 -- 大数据大厂之优化大数据计算框架 Tez 的实践指南

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

java 中 List<T> 类型数据在 postgreSql 数据库中存储

一 属性添加注解 在类上面添加注解&#xff1a; TableName(autoResultMap true) 在字段上面添加注解&#xff1a; TableField(value "list", typeHandler UserHandler.class) private List<User> list new ArrayList<>(); 二 创建 UserHandler 类…...

公共命名空间,2024年10月的笔记

首先&#xff0c;我国选择C做为竞赛语言&#xff0c;许多人学C&#xff0c;学习的结果是&#xff1a;看到“公共命名空间”&#xff0c;就幻想出一个私有命名空间&#xff0c;其实&#xff0c;公共命名空间和C的命名空间无关&#xff01; 超简源代码 已知序列v{1,2,3,4,5}&…...

frida脚本,自动化寻址JNI方法

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 1. 通过 ArtMethod 结构体找到 jni 方法在内存中的地址&#xff0c;并把寻址方法通过 rpc.exports 暴露给 Python 脚本调用 jni_addr.js let entry_point_fr…...

‌MySQL中‌between and的基本用法‌

文章目录 一、between and语法二、使用示例2.1、between and数值查询2.2、between and时间范围查询2.3、not between and示例 BETWEEN AND操作符可以用于数值、日期等类型的字段&#xff0c;包括边界值。 一、between and语法 MySQL中的BETWEEN AND操作符用于在两个值之间选择…...

Ceph 存储系统全解

1. 引言 什么是 Ceph&#xff1f; Ceph 是一个开源的分布式存储系统&#xff0c;旨在提供高性能、可扩展、无单点故障的统一存储平台。它可以同时支持对象存储、块存储和文件系统存储&#xff0c;能够满足不同存储需求的多种应用场景。Ceph 通过其强大的 RADOS&#xff08;可…...

C# ftp帮助类 项目实战优化版

上位机开发中有时要与客户的文件服务器进行数据交互。如Mapping文件下载。结果文件上传等。我在项目中就常用到。现在把项目实战代码进行分享一下。 功能列表&#xff1a;连接服务器&#xff0c;下载文件&#xff0c;上传文件&#xff0c;删除服务器文件&#xff0c;获取当前目…...

栈和队列相关|有效的括号|用队列实现栈|用栈实现队列|设计循环队列(C)

20. 有效的括号 判断左右括号是否匹配&#xff0c;匹配返回true&#xff0c;不匹配返回false 通过栈来实现&#xff0c;类型和顺序&#xff0c;数量都要匹配 控制数量通过size 每个右括号都要找最近的左括号去判断类型匹配不匹配&#xff0c;顺序匹配不匹配 最后来判断数量匹配…...

云原生后端开发教程

云原生后端开发教程 引言 随着云计算的普及&#xff0c;云原生架构逐渐成为现代软件开发的主流。云原生不仅仅是将应用部署到云上&#xff0c;而是一种构建和运行应用的方式&#xff0c;充分利用云计算的弹性和灵活性。本文将深入探讨云原生后端开发的核心概念、工具和实践&a…...

TortoiseSVN小乌龟下载安装(Windows11)

目录 TortoiseSVN 1.14.7工具下载安装 TortoiseSVN 1.14.7 工具 系统&#xff1a;Windows 11 下载 官网&#xff1a;https://tortoisesvn.subversion.org.cn/downloads.html如图选 TortoiseSVN 1.14.7 - 64 位 下载完成 安装 打开 next&#xff0c;next Browse&#xf…...

Android adb命令获取设备id

Android adb命令获取设备id 方式很多&#xff0c;以下均可获得Android device id&#xff1a; adb shell settings get secure android_id adb shell settings get secure android_id adb devices -l adb shell content query --uri content://settings/secure --where "…...

Skywalking教程一

Skywalking教程一 概述Skywalking功能特点&#xff1a; 概述 一个大型分布式系统架构&#xff0c;监控平台是必不可少的&#xff0c;常用的分布式系统监控平台有&#xff1a;SkyWalking和Prometheus。Skywalking是一款比较优秀的分布式系统监控平台&#xff0c;一款分布式系统…...

React中管理state的方式

使用useState 使用useReducer 既然已经有了useState&#xff0c;为什么还需要useReducer呢&#xff1f; 那么useReducer是如何将解决这些问题的呢&#xff1f; reducer是如何更新state的呢&#xff1f; reducer的工作方式非常类似JavaScript中的reduce方法&#xff0c;随着时…...

服务器数据恢复—RAID5阵列中部分成员盘重组RAID5阵列后如何恢复原raid5阵列数据?

服务器数据恢复环境&#xff1a; 一台服务器挂接一台存储&#xff0c;该存储中有一组由5块硬盘组建的RAID5阵列。 服务器故障&#xff1a; 存储raid5阵列中有一块硬盘掉线。由于RAID5的特性&#xff0c;阵列并没有出现问题。工作一段时间后&#xff0c;服务器出现故障&#xff…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...