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

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&#xff1a;该功能只能针对高度一致的&#xff0c;如果高度不一致需要另外二开 演示 开始 <template><view style"height: 100%;"><movable-area :style"{width: 100%, height: allHeight px}"…...

十九(GIT2)、token、黑马就业数据平台(页面访问控制(token)、首页统计数据、登录状态失效)、axios请求及响应拦截器、Git远程仓库

1. JWT介绍 JSON Web Token 是目前最为流行的跨域认证解决方案&#xff0c;本质就是一个包含信息的字符串。 如何获取&#xff1a;在使用 JWT 身份验证中&#xff0c;当用户使用其凭据成功登录时&#xff0c;将返回 JSON Web Token&#xff08;令牌&#xff09;。 作用&#xf…...

文生图模型开源之光!ComfyUI - AuraFlow本地部署教程

一、模型介绍 AuraFlow 是唯一一个真正开源的文生图模型&#xff0c;由Fal团队开源&#xff0c;其代码和权重都放在了 FOSS 许可证下。基于 6.8B 参数优化模型架构&#xff0c;采用最大更新参数化技术&#xff0c;还重新标注数据集提升指令遵循质量。在物体空间和色彩上有优势…...

spring boot之@Import注解的应用

我们知道spring boot会通过ComponentScan定义包扫描路径进行业务定义的bean的加载&#xff0c;但是对于很多不在此包路径下定义的bean怎么办呢&#xff1f;比如其他jar包中定义的。这时候import就发挥作用了&#xff0c;通过它也可以实现bean的定义。具体是怎么做的呢&#xff…...

【记录】用JUnit 4的@Test注解时报错java.lang.NullPointerException的原因与解决方法

项目场景&#xff1a; 在练习黑马点评的逻辑过期解决缓存击穿时&#xff0c;编写了一个预热缓存数据的单元测试 SpringBootTest public class HmDianPingApplicationTests {Resourceprivate ShopServiceImpl shopService;Testpublic void testSaveShop() throws InterruptedE…...

Spring Boot 自动化脚本-多线程批量压缩图片

Spring Boot 自动化脚本-多线程批量压缩图片 支持多线程支持多路径配置支持断点续压支持压缩后文件层级路径不变脚本一键启动&#xff0c;支持本地 main 调用或远程 POST 接口调用 背景&#xff1a;在进行数据迁移时&#xff0c;发现附件文件夹过于庞大&#xff0c;且大都为图…...

依托 Spring Boot框架,精铸高扩展性招聘信息管控系统

1 绪 论 1.1 课题背景与意义 在Internet高速发展的今天&#xff0c;计算机的应用几乎完全覆盖我们生活的各个领域&#xff0c;互联网在经济&#xff0c;生活等方面有着举足轻重的地位&#xff0c;成为人们资源共享&#xff0c;信息快速传递的重要渠道。在中国&#xff0c;网上管…...

【前端】理解 JavaScript 对象属性访问的复杂性

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;理论基础&#xff1a;JavaScript 对象属性的访问模式1. 点符号访问&#xff08;Dot Notation&#xff09;2. 方括号访问&#xff08;Bracket Notation&#xff09;点符号…...

Django异步视图adrf解决办法

提问 在Django编写异步视图的时候会出现 AssertionError: Expected a Response, HttpResponse or HttpStreamingResponse to be returned from the view 或者 TypeError: sync_to_async can only be applied to sync functions. 诸如此类的错误的时候一般发生在异步视图中…...

【一文了解】C#基础-接口

目录 1. 定义 2. 接口的特点与规则 3. 接口的实现 3.1单接口实现 3.2多接口实现 4. 接口的作用和用途 1)扩展行为 2)规范行为 3)降低耦合 5. 接口与继承的比较 1)继承 2)接口 6. 接口与抽象类的比较 1)IComparable(比较器&#xff0c;常用) 2)IComparer(比较器)…...

活着就好20241210

亲爱的朋友们&#xff0c;大家早上好&#xff01;&#x1f31e; 今天是10号&#xff0c;星期二&#xff0c;2024年12月的第十天&#xff0c;同时也是第50周的开始&#xff0c;农历甲辰[龙]年十一月初六日。在这晨光熹微的美好时刻&#xff0c;愿那温暖而明媚的阳光轻轻拂过你的…...

多表设计 - 一对一多对多

一.一对一关系概述&#xff1a; 例如&#xff1a;一位用户只能有一张身份证&#xff0c;一张身份证也只能对应一位用户 如果用户基本信息查询频率比用户身份信息查询频率高&#xff0c;为了提高效率&#xff0c;可拆分为两张表&#xff1a; 此时如何体现一对一的关系呢&#xf…...

实现 DataGridView 下拉列表功能(C# WinForms)

本文介绍如何在 WinForms 中使用 DataGridViewComboBoxColumn 实现下拉列表功能&#xff0c;并通过事件响应来处理用户的选择。以下是实现步骤和示例代码。 1. 效果展示 该程序的主要功能是展示如何在 DataGridView 中插入下拉列表&#xff0c;并在选择某一项时触发事件。 2.…...

使用Java创建RabbitMQ消息生产者的详细指南

目录 在现代分布式系统中&#xff0c;消息队列是实现异步通信的重要工具。RabbitMQ作为一种流行的开源消息代理&#xff0c;支持多种消息协议&#xff0c;广泛应用于微服务架构和事件驱动的应用程序中。本文将深入探讨如何使用Java创建RabbitMQ的消息生产者&#xff0c;发送消息…...

【LC】160. 相交链表

题目描述&#xff1a; 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&…...

Spark架构及运行流程

Spark架构图 Driver&#xff1a; 解析用户的应用程序代码&#xff0c;转化为作业(job)。创建SparkContext上下文对象&#xff0c;其负责与资源管理器(ClusterManager)通信&#xff0c;进行资源的申请、任务的分配和监控等。跟踪Executor的执行情况。可通过UI界面查询运行情况。…...

Linux安装Python2.7.5(centos自带同款)

卸载已安装的python,防止版本兼容问题 rpm -qa|grep python|xargs rpm -ev --allmatches --nodeps 删除残余文件 whereis python |xargs rm -frv 安装前提是已安装gcc和g gcc --version g --version 下载安装python2.7.5 https://www.python.org/downloads/release/pyt…...

上传ssh公钥到目标服务器

创建密钥 ssh-keygen -t rsa -b 4096 -C "xxxx.xx"上传 sudo ssh-copy-id -i /Users/xx/.ssh/id_rsa.pub root127.0.0.1...

【LLMs】用LM Studio本地部署离线大语言模型

文章目录 一、下载LM Studio二、下载大语言模型1. 查看模型介绍2. 点击模型文件进行下载2.1 完整下载2.2 部分下载 三、加载模型1. 打开LM Studio图形化界面&#xff0c;点击**My Models**2. 然后&#xff0c;点击“...”&#xff0c;选择“change”&#xff0c;选择刚下载好的…...

SpringBoot下类加入容器的几种方式

SpringBoot下类加入容器的几种方式 在 Spring Boot 中&#xff0c;类加入容器的方式不仅多样&#xff0c;而且每种方式都有其特定的使用场景。以下是几种常见的将类加入 Spring 容器的方法及其适用场景&#xff1a; 1. 使用 Component 及其派生注解 使用场景&#xff1a;当开…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

渗透实战PortSwigger靶场:lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...