uni-app引入sortable列表拖拽,兼容App和H5,拖拽排序。
效果:
拖拽排序
背景:
作为一名前端开发人员,在工作中难免会遇到拖拽功能,分享一个github上一个不错的拖拽js库,能满足我们在项目开发中的需要,下面是我在uniapp中使用SortableJS的使用详细流程;
vue开发的web项目可以参考我的另一篇文章
Vue中拖动排序功能,引入SortableJs,前端拖动排序。
https://blog.csdn.net/weixin_64530670/article/details/132328122?spm=1001.2014.3001.5501
开始前先下载好Sortable至项目中,可直接下载min包,官方文档:
SortableJs中文文档
http://www.sortablejs.com
- sortable下载到本地 renderjs只支持H5和App-vue,不支持小程序和App-nvue开发
- 下载好后,在html代码处,找到你要拖拽排序的元素的父元素,给它设置一个id,我这边设置的就是'sort' ,然后 给要拖拽的元素设置:data-id 它的作用是,决定了拖拽结束后返回给你一个怎样的数组,传item.id,它就会自动在拖拽结束后返回给你一个拖拽后排序好的id数组. 然后我们就可以拿去处理数据,发请求保存顺序啦!
<view class="appList" id="sort"><view class="appItem" v-for="(item,index) in usualist" :key='item.appId' :data-id="item.appId"><view class="remove" @tap="remove(item)"><u-icon name="minus-circle-fill"></u-icon></view><image class="img" :src='getimgUrl(item.overImgUrl)' v-if="Boolean(item.overImgUrl)"></image><view class="first" v-else>{{getfirst(item.name)}}</view><view class="appIntroduction"><text>{{item.name}}</text></view><view class="totop"><u-icon name="list"></u-icon></view></view></view> -
css:
.sort {display: flex;align-items: center;flex-wrap: wrap;&-item {width: 200rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 15rpx;background: #f5f5f5;margin: 5rpx;}} -
js代码 再写一个script标签:
<script module='sortable' lang="renderjs"> import Sortable from 'static/Sortable.min.js' export default {mounted() {this.initSortable()},methods: {initSortable() {if (typeof window.Sortable === 'function') {this.setSortable()} else {const script = document.createElement('script')script.src = '/static/Sortable.min.js'script.onload = this.setSortable.bind(this)document.head.appendChild(script)}},setSortable() {let option = {animation: 150,delay:300,onEnd: (e) => {// 拖拽完成后回调this.$ownerInstance.callMethod('changeSort', sortable.toArray());}}let sortable = Sortable.create(document.getElementById('sort'), option);},} } </script>以上代码中,在执行完拖拽后会执行changeSort方法,这个方法需要写到原本的那个script中:
changeSort(e) {console.log(e)this.flag = truethis.updatelist = e.join(',')},拖拽后打印出来的e就是有已经排序好的每一项的id组成的数组。
相关文章:
uni-app引入sortable列表拖拽,兼容App和H5,拖拽排序。
效果: 拖拽排序 背景: 作为一名前端开发人员,在工作中难免会遇到拖拽功能,分享一个github上一个不错的拖拽js库,能满足我们在项目开发中的需要,下面是我在uniapp中使用SortableJS的使用详细流程; vue开发…...
Redis-内存淘汰算法
Redis可以存多少数据 32位的操作系统默认3G 谁现在用32位啊?我们说64位的 一般来讲是不设上限的 但是我们也可以主动配置maxmemory, maxmemory支持各单位: maxmemory 1024 (默认字节) maxmemory 1024KB maxmemory 1024MB maxmemory 1204GB 当Redis存储超过这个配置值&#…...
Git 合并分支时允许合并不相关的历史
git fetch git fetch 是 Git 的一个命令,用于从远程仓库中获取最新的提交和数据,同时更新本地仓库的远程分支指针。 使用 git fetch 命令可以获取远程仓库的最新提交,但并不会自动合并或修改本地分支。它会将远程仓库的提交和引用ÿ…...
世界上最著名的密码学夫妻的历史
Alice和Bob是密码学领域里最著名的虚拟夫妻,自1978年“诞生”以来,到走进二十一世纪的移动互联网时代,作为虚构的故事主角,Alice和Bob不仅在计算机理论、逻辑学、量子计算等与密码学相关的领域中得到应用,他们的名字也…...
二维码网络钓鱼攻击泛滥!美国著名能源企业成主要攻击目标
近日,Cofense发现了一次专门针对美国能源公司的网络钓鱼攻击活动,攻击者利用二维码将恶意电子邮件塞进收件箱并绕过安全系统。 Cofense 方面表示,这是首次发现网络钓鱼行为者如此大规模的使用二维码进行钓鱼攻击,这表明他们可能正…...
前端面试题-CSS
1. 盒模型 ⻚⾯渲染时, dom 元素所采⽤的 布局模型。可通过 box-sizing 进⾏设置。根据计算宽⾼的区域可分为 content-box ( W3C 标准盒模型)border-box ( IE 盒模型)padding-boxmargin-box (浏览器未实现) 2. BFC 块级格式化上下⽂,是⼀个独⽴的渲染…...
6.1 安全漏洞与网络攻击
数据参考:CISP官方 目录 安全漏洞及产生原因信息收集与分析网络攻击实施后门设置与痕迹清除 一、安全漏洞及产生原因 什么是安全漏洞 安全漏洞也称脆弱性,是计算机系统存在的缺陷 漏洞的形式 安全漏洞以不同形式存在漏洞数量逐年递增 漏洞产生的…...
STM32--EXTI外部中断
前文回顾---STM32--GPIO 相关回顾--有关中断系统简介 目录 STM32中断 NVIC EXTI外部中断 AFIO EXTI框图 旋转编码器简介 对射式红外传感器工程 代码: 旋转编码器工程 代码: STM32中断 先说一下基本原理: 1.中断请求发生:…...
Python + Selenium 处理浏览器Cookie
工作中遇到这么一个场景:自动化测试登录的时候需要输入动态验证码,由于某些原因,需要从一个已登录的机器上,复制cookie过来,到自动化这边绕过登录。 浏览器的F12里复制出来的cookie内容是文本格式的: uui…...
文件的导入与导出
文章目录 一、需求二、分析1. Excel 表格数据导出2. Excel 表格数据导入一、需求 在我们日常开发中,会有文件的导入导出的需求,如何在 vue 项目中写导入导出功能呢 二、分析 以 Excel 表格数据导出为例 1. Excel 表格数据导出 调用接口将返回的数据进行 Blob 转换,附: 接…...
[C++] string类的介绍与构造的模拟实现,进来看吧,里面有空调
文章目录 1、string类的出现1.1 C语言中的字符串 2、标准库中的string类2.1 string类 3、string类的常见接口说明及模拟实现3.1 string的常见构造3.2 string的构造函数3.3 string的拷贝构造3.4 string的赋值构造 4、完整代码 1、string类的出现 1.1 C语言中的字符串 C语言中&…...
【Apollo】赋能移动性:阿波罗自动驾驶系统的影响
前言 Apollo (阿波罗)是一个开放的、完整的、安全的平台,将帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统,快速搭建一套属于自己的自动驾驶系统。 开放能力、共享资源、加速创新、持续共赢是 Apollo 开放平台的口号。百度把自己所拥有的强大、…...
Camunda 7.x 系列【19】表达式语言
有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 2.7.9 本系列Camunda 版本 7.19.0 源码地址:https://gitee.com/pearl-organization/camunda-study-demo 文章目录 1. 概述2. 变量与函数2.1 流程变量2.2 内置环境变量2.3 Spring、CDI Bean2.4 内置上下文函数…...
详解RFC 793文档-4
3.7 数据通信 一旦连接建立,数据就通过交换数据段进行通信。由于错误(校验和错误)或网络拥塞可能导致数据段丢失,TCP使用重传(超时后)来确保每个段的交付。由于网络或TCP重传,可能会到达重复的段。对于重复段,TCP对段中的SEQ和ACK号执行某些检测,以验证它们的可接受性…...
ubuntu16编译内核源码并替换
文章目录 1.找到和ubuntu内核版本相同的内核源码包2.下载下面三个文件3.相关步骤4.安装编译环境软件参考: 1.找到和ubuntu内核版本相同的内核源码包 4.15.0-112.113 : linux package : Ubuntu (launchpad.net) 2.下载下面三个文件 3.相关步骤 uname -r #查看内核…...
AI 绘画Stable Diffusion 研究(九)sd图生图功能详解-老照片高清修复放大
大家好,我是风雨无阻。 通过前面几篇文章的介绍,相信各位小伙伴,对 Stable Diffusion 这款强大的AI 绘图系统有了全新的认知。我们见识到了借助 Stable Diffusion的文生图功能,利用简单的几个单词,就可以生成完美的图片…...
Linux系统安装Google Chrome
1.进入谷歌浏览器官网 Google Chrome - Download the Fast, Secure Browser from GoogleGet more done with the new Google Chrome. A more simple, secure, and faster web browser than ever, with Google’s smarts built-in. Download now.http://www.google.cn/intl/en_…...
带你了解SpringBoot支持的复杂参数--自定义对象参数-自动封装
😀前言 本篇博文是关于SpringBoot 在响应客户端请求时支持的复杂参数和自定义对象参数,希望您能够喜欢😊 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章…...
Raspberry Pi Pico RP2040制作低成本FPGA JTAG工具
目录 1 准备工作和前提条件 1.1 Raspberry Pi Pico RP2040板子一个 1.2 xvcPico.uf2固件 1.3 Vivado USB驱动 2 操作指南 2.1 按住Raspberry Pi Pico开发板的BOOTSEL按键,再接上USB接口到电脑 2.2 刷入固件 2.3 Vivado USB 驱动 2.3.1 打开Zadig驱动工具 2.3…...
【工具】Python从临时邮箱获取验证码
安装好依赖库之后代码可直接运行, captcha re.search(r您的验证码为: \*(\w)\*, response.json()[body][html])正则表达式部分改成自己的。 import random import requests import re from faker import Fakerdomain "https://api.mail.cx/api/v1" # 临…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...
