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;}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/58669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Webserver(1.8)操作函数

目录 文件属性操作函数access函数chmod函数chown函数truncate函数 目录操作函数mkdir函数rmdir函数rename函数chdir函数*getcwd函数 目录遍历函数*opendir函数*readdir函数closedir函数 dup、dup2函数dupdup2 fcntl函数 文件属性操作函数 access函数 判断某个文件是否有某个权…

基础IO -- 标准错误输出stderr

目录 1&#xff09;为什么要有 fd 为 2 的 stderr 2&#xff09;使2和1重定向到一个文件中 这里我们谈一下以前只是了解过的stderr 通过两段代码&#xff0c;显然&#xff0c;我们可以知道两个FILE*都是指向显示器的 对于重定向&#xff0c;只有stdout才会将打印的数据重定向…

基于Multisim的四位抢答器设计与仿真

四位选手进行抢答比赛&#xff0c;用基本门电路及集成逻辑器件构成四人抢答器。选手编号分别为1&#xff0c;2&#xff0c;3&#xff0c;4号&#xff0c;用S1&#xff0c;S2&#xff0c;S3&#xff0c;S4四个按钮作为抢答按钮&#xff0c;S0按钮为总清零按钮。当四人中任何一个…

Python毕业设计选题:基于Django+Vue的物资配送管理系统的设计与实现

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录界面 管理员功能界面 申领者管理 后勤处管理 物资信息管理 入库信息管理 …

网安秋招面试

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect 《Web安全》h…

springboot092安康旅游网站的设计与实现(论文+源码)_kaic

毕业设计&#xff08;论文&#xff09; 基于JSP的安康旅游网站的设计与实现 姓  名 学  号 院  系 专  业 指导老师 2021 年 月 教务处制 目 录 目 录 摘 要 Abstract 第一章 绪论 1.1 研究现状 1.2 设…

selenium无头浏览器截图并以邮件发送

selenium 4.11版本的selenium无需在本地下载浏览器驱动 # Time : 2024/10/18 17:54 # Author : # FileName: print_sc.py # Description: import smtplib from email.mime.multipart import MIMEMultipart from email.mime.text import MIMEText from email.mime.image i…

字符串逆序(c语言)

错误代码 #include<stdio.h>//字符串逆序 void reverse(char arr[], int n) {int j 0;//采用中间值法//访问数组中第一个元素和最后一个元素//交换他们的值&#xff0c;从而完成了字符串逆序//所以这个需要临时变量for (j 0; j < n / 2; j){char temp arr[j];arr[…

Fakelocation 步道乐跑(Root真机篇)

前言:需要 Fakelocation&#xff0c;真机Root,步道乐跑&#xff0c;Dia&#xff0c;MT管理器系统需求 Fakelocation | MT管理器 | Dia | 环境模块 任务一 真机Root&#xff08;德尔塔&#xff0c;过momo&#xff0c;刷环境模块&#xff09; 任务二 前往Dia查看包名&#xff08…

Vue学习笔记(十二)

async与await 1. async async作为一个关键字放到声明函数前面&#xff0c;表示该函数为一个异步任务&#xff0c;不会阻塞后面函数的执行async函数里如果有异步过程会等待&#xff0c;但async函数本身会马上返回&#xff0c;不会阻塞当前线程。可以简单认为async函数工作在主…

【实战篇】requests库 - 有道云翻译爬虫 【附:代理IP的使用】

目录 〇、引言一、目标二、请求参数分析三、响应分析四、编写爬虫脚本【隧道代理的使用】 〇、引言 无论是学习工作、旅游出行、跨境电商、日常交流以及一些专业领域都离不开翻译工具的支持。本文就带大家通过爬虫的方式开发一款属于自己的翻译工具~ 一、目标 如下的翻译接口…

MyBatis 源码分析 - SQL执行过程(三)之 ResultSetHandler

MyBatis的SQL执行过程 在前面一系列的文档中&#xff0c;我已经分析了 MyBatis 的基础支持层以及整个的初始化过程&#xff0c;此时 MyBatis 已经处于就绪状态了&#xff0c;等待使用者发号施令了 那么接下来我们来看看它执行SQL的整个过程&#xff0c;该过程比较复杂&#xff…

达梦数据迁移工具DTS使用实践

1、环境描述 2、DTS概述 1.支持视图、存储过程/函数、包、类、同义词、触发器等对象迁移&#xff1b; 2.支持数据类型的自动映射&#xff0c;编码转换&#xff1b; 3.支持根据条件自定义迁移部分数据&#xff1b; 4.向导式迁移步骤&#xff0c;上手简单&#xff1b; 5.支持 we…

【Web.路由】——路由约束

我们需要明确的一点就是&#xff0c;一个URL地址就是一个路由值。 而路由约束&#xff0c;就是制定出的一套规则&#xff0c;只有路由值与路由约束中的规则匹配&#xff0c;才可以进行下一步操作。 路由约束不仅可用于路由请求&#xff0c;还可以用于链接的生成。 参数值约束 …

医药公司常用的九大翻译场景

医药公司的翻译工作通常涉及多个专业领域&#xff0c;以下是一些常见的翻译场景&#xff1a; 1、药品说明书翻译&#xff1a;包括药物的成分、副作用、使用方法、储存条件等内容的翻译&#xff0c;必须准确无误&#xff0c;以确保患者和医务人员能够正确使用药物。 2、临床研…

VB中的安全性考虑,如防止SQL注入、XSS攻击等

在Visual Basic (VB) 开发中&#xff0c;安全性是一个至关重要的考虑因素。为了防止SQL注入、跨站脚本&#xff08;XSS&#xff09;攻击等常见安全威胁&#xff0c;开发人员需要采取一系列措施来确保应用程序的安全性。以下是对VB中安全性考虑的详细描述&#xff1a; 防止SQL注…

c++编解码封装

多态版编解码 对服务器和客户端的结构体进行序列化然后对数据进行反序列化 案例分析 代码demo Codec.h #pragma once #include <iostream>class Codec { public:Codec();virtual std::string encodeMsg();//string是标准库的string类virtual void* decodeMsg();virtu…

Android 圆形进度条CircleProgressView 基础版

一个最基础的自定义View 圆形进度条&#xff0c;可设置背景色、进度条颜色&#xff08;渐变色&#xff09;下载进度控制&#xff1b;可二次定制度高&#xff1b; 核心代码&#xff1a; Overrideprotected void onDraw(NonNull Canvas canvas) {super.onDraw(canvas);int mW g…

防抖与节流 - 2024最新版前端秋招面试短期突击面试题【100道】

防抖与节流 - 2024最新版前端秋招面试短期突击面试题【100道】 ⏲️ 在JavaScript中&#xff0c;防抖&#xff08;Debouncing&#xff09;与节流&#xff08;Throttling&#xff09;是两种常用的性能优化技术&#xff0c;尤其在处理频繁触发的事件时&#xff0c;如滚动、窗口调…

SSH登录介绍

说明&#xff1a;一般登录服务器&#xff0c;我们可以用远程连接工具&#xff0c;如XShell、Windterm等&#xff0c;或者通过公司搭建的JumpServer&#xff08;跳板机、堡垒机&#xff09;来连接。前者是点对点登录&#xff0c;输入主机、端口&#xff0c;通过SSH协议登录&…