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>

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

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

相关文章

访问者模式的理解和实践

在软件开发过程中&#xff0c;设计模式为我们提供了解决常见问题的最佳实践。访问者模式&#xff08;Visitor Pattern&#xff09;是行为设计模式之一&#xff0c;它将数据操作与数据结构分离&#xff0c;使得在不修改数据结构的前提下&#xff0c;能够定义作用于这些元素的新的…

MATLAB直流电机模型,直流电机控制

直流电机控制简介 直流电机&#xff08;DC motor&#xff09;广泛应用于各种机械驱动和电力控制系统中&#xff0c;其运行性能的控制至关重要。为了精准地控制直流电机的输出特性&#xff0c;可以通过不同的控制方式进行调节。常见的控制方式包括电枢电流控制、速度控制、电机位…

【工业机器视觉】基于深度学习的水表盘读数识别(2-数据采集与增强)

【工业机器视觉】基于深度学习的仪表盘识读&#xff08;1&#xff09;-CSDN博客 数据采集与增强 为了训练出适应多种表型和环境条件的模型&#xff0c;确保数据集的质量与多样性对于模型的成功至关重要。高质量的数据不仅需要准确无误、具有代表性&#xff0c;还需要涵盖尽可能…

vscode通过ssh连接远程服务器(实习心得)

一、连接ssh服务器 1.打开Visual Studio Code&#xff0c;进入拓展市场(CtrlShiftX)&#xff0c;下载拓展Remote - SSH 2. 点击远程资源管理器选项卡&#xff0c;并选择远程(隧道/SSH)类别 3. 点击ssh配置&#xff1a;输入你的账号主机ip地址 4.在弹出的选择配置文件中&#xf…

Maven(生命周期、POM、模块化、聚合、依赖管理)详解

Maven构建项目的生命周期 在Maven出现之前&#xff0c;项目构建的生命周期就已经存在&#xff0c;软件开发人员每天都在对项目进行清理&#xff0c;编译&#xff0c;测试&#xff0c;部署等工作&#xff0c;这个过程就是项目构建的生命周期。虽然大家都在不停的做构建工作&…

webstorm开发uniapp(从安装到项目运行)

1、下载uniapp插件 下载连接&#xff1a;Uniapp Tool - IntelliJ IDEs Plugin | Marketplace &#xff08;结合自己的webstorm版本下载&#xff0c;不然解析不了&#xff09; 将下载到的zip文件防在webstorm安装路径下&#xff0c;本文的地址为&#xff1a; 2、安装uniapp插…

unique_ptr自定义删除器,_Compressed_pair利用偏特化减少存储的一些设计思路

主要是利用偏特化&#xff0c; 如果自定义删除器是空类&#xff08;没有成员变量&#xff0c;可以有成员函数&#xff09;&#xff1a; _Compressed_pair会继承删除器&#xff08;删除器作为基类&#xff09;&#xff0c;但_Compressed_pair里不保存删除器对象&#xff0c;只…

【数据结构——栈与队列】环形队列的基本运算(头歌实践教学平台习题)【合集】

目录&#x1f60b; 任务描述 相关知识 测试说明 我的通关代码: 测试结果&#xff1a; 任务描述 本关任务&#xff1a;编写一个程序实现环形队列的基本运算。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 初始化队列、销毁队列、判断队列是否为空、进队列…

路由器、二层交换机与三层交换机的区别与应用

路由器、二层交换机和三层交换机是常见的网络设备&#xff0c;常常协同工作。它们都可以转发数据&#xff0c;但在功能、工作层级以及应用场景上存在差异。 1. 工作层级 三者在OSI模型中的工作层级不同&#xff1a; 路由器&#xff1a; 工作在 网络层&#xff08;第三层&#…

SQL计算字段:拼接字段

为了说明如何使用计算字段&#xff0c;本文将通过一个简单的示例来展示如何将两列组合成一个标题。假设Vendors表包含供应商的名称和国家信息&#xff0c;我们希望生成一个报表&#xff0c;其中列出每个供应商的名称和所在国家&#xff0c;并且需要格式化名称显示&#xff0c;国…

高级数据结构-树状数组

介绍 树状数组的推导 两个基础操作 模板-acwing795. 前缀和 #include<bits/stdc.h> using namespace std;const int N 1e610; int c[N]; int lowbit(int x){return x & -x; }int query(int x){int ans 0;for(; x; x - lowbit(x)) ans c[x];return ans; }void add…

香港科技大学广州|智能交通学域博士招生宣讲会—湖南大学专场

香港科技大学广州&#xff5c;智能交通学域博士招生宣讲会—湖南大学专场 &#x1f559;时间&#xff1a;2024年12月17日&#xff08;星期二&#xff09;15:00 &#x1f3e0;地点&#xff1a;湖南大学二办公楼三楼学生就业指导中心329 &#x1f517;报名链接&#xff1a;http…

node利用路由搭建web实例

npm init npm i express body-parser cookie-parser 封装web实例 搭建路由 导出web 应用实例注册

MFC案例:基于对话框的简易阅读器

一、功能目标&#xff1a; 1.阅读txt文件 2.阅读时可以调整字体及字的大小 3.打开曾经阅读过的文件时&#xff0c;能够自动从上次阅读结束的位置开始显示&#xff0c;也就是能够保存和再次使用阅读信息。 4.对于利用剪贴板粘贴来的文字能够存储成txt文件保存。 5.显示…

端点鉴别、安全电子邮件、TLS

文章目录 端点鉴别鉴别协议ap 1.0——发送者直接发送一个报文表明身份鉴别协议ap 2.0——ap1.0 的基础上&#xff0c;接收者对报文的来源IP地址进行鉴别鉴别协议ap 3.0——使用秘密口令&#xff0c;口令为鉴别者和被鉴别者之间共享的秘密鉴别协议ap 3.1——对秘密口令进行加密&…

电脑技巧:Everything 1.5 版本重大更新​支持拼音搜索+全文搜索

目录 一、软件介绍 二、主要更新亮点 更快的搜索速度和拼音搜索 全文搜索功能 智能推荐功能 增强的过滤选项 改进的用户界面 更好的多语言支持 增强的安全性和隐私保护 三、总结 Everything 作为一款备受推崇的文件搜索工具&#xff0c;以其卓越的性能和简洁的用户界…

element左侧导航栏

由element组件搭建的左侧导航栏 预览: html代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>首页</title><style> /*<!-- 调整页面背景颜色-->*/body{background-colo…

Datax可视化工具Datax-web安装部署

文章目录 一、Datax-web官网二、Datax-web介绍 1、Datax-web概述2、架构图3、系统环境要求4、特性支持 三、安装部署 1、环境准备2、Datax-web安装包准备 一、Datax-web官网 github&#xff1a;Datax-web gitee: Datax-web 二、Datax-web介绍 1、Datax-web概述 DataX Web…

node-js Express中间件

中间件介绍 什么是中间件 中间件其本质就是一个回调函数&#xff0c;可以像路由一样访问请求对象&#xff08;request&#xff09;和响应对象&#xff08;response&#xff09;。中间件的作用是什么 通过函数封装公共操作&#xff0c;简化代码中间件类型 - 全局中间件 - 路由中…

【数学】矩阵的逆与伪逆 EEGLAB

文章目录 前言matlab代码作用EEGLAB 中的代码总结参考文献 前言 在 EEGLAB 的使用中&#xff0c;运行程序时出现了矩阵接近奇异值&#xff0c;或者缩放错误。结果可能不准确。RCOND 1.873732e-20 的 bug&#xff0c;调查 EEGLAB 后发现是 raw 数据的问题。 matlab代码 A_1 …