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

uni-app引入sortable列表拖拽,兼容App和H5,拖拽排序。

效果:

拖拽排序

背景:

作为一名前端开发人员,在工作中难免会遇到拖拽功能,分享一个github上一个不错的拖拽js库,能满足我们在项目开发中的需要,下面是我在uniapp中使用SortableJS的使用详细流程; 

vue开发的web项目可以参考我的另一篇文章

Vue中拖动排序功能,引入SortableJs,前端拖动排序。icon-default.png?t=N6B9https://blog.csdn.net/weixin_64530670/article/details/132328122?spm=1001.2014.3001.5501

开始前先下载好Sortable至项目中,可直接下载min包,官方文档:
SortableJs中文文档http://www.sortablejs.com

  1. ​​sortable​​下载到本地  ​​renderjs​​只支持H5和App-vue,不支持小程序和App-nvue开发
  2. 下载好后,在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>

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

  4. 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,拖拽排序。

效果: 拖拽排序 背景&#xff1a; 作为一名前端开发人员&#xff0c;在工作中难免会遇到拖拽功能&#xff0c;分享一个github上一个不错的拖拽js库&#xff0c;能满足我们在项目开发中的需要&#xff0c;下面是我在uniapp中使用SortableJS的使用详细流程&#xff1b; vue开发…...

Redis-内存淘汰算法

Redis可以存多少数据 32位的操作系统默认3G 谁现在用32位啊?我们说64位的 一般来讲是不设上限的 但是我们也可以主动配置maxmemory, maxmemory支持各单位: maxmemory 1024 (默认字节) maxmemory 1024KB maxmemory 1024MB maxmemory 1204GB 当Redis存储超过这个配置值&#…...

Git 合并分支时允许合并不相关的历史

git fetch git fetch 是 Git 的一个命令&#xff0c;用于从远程仓库中获取最新的提交和数据&#xff0c;同时更新本地仓库的远程分支指针。 使用 git fetch 命令可以获取远程仓库的最新提交&#xff0c;但并不会自动合并或修改本地分支。它会将远程仓库的提交和引用&#xff…...

世界上最著名的密码学夫妻的历史

Alice和Bob是密码学领域里最著名的虚拟夫妻&#xff0c;自1978年“诞生”以来&#xff0c;到走进二十一世纪的移动互联网时代&#xff0c;作为虚构的故事主角&#xff0c;Alice和Bob不仅在计算机理论、逻辑学、量子计算等与密码学相关的领域中得到应用&#xff0c;他们的名字也…...

二维码网络钓鱼攻击泛滥!美国著名能源企业成主要攻击目标

近日&#xff0c;Cofense发现了一次专门针对美国能源公司的网络钓鱼攻击活动&#xff0c;攻击者利用二维码将恶意电子邮件塞进收件箱并绕过安全系统。 Cofense 方面表示&#xff0c;这是首次发现网络钓鱼行为者如此大规模的使用二维码进行钓鱼攻击&#xff0c;这表明他们可能正…...

前端面试题-CSS

1. 盒模型 ⻚⾯渲染时&#xff0c; dom 元素所采⽤的 布局模型。可通过 box-sizing 进⾏设置。根据计算宽⾼的区域可分为 content-box ( W3C 标准盒模型)border-box ( IE 盒模型)padding-boxmargin-box (浏览器未实现) 2. BFC 块级格式化上下⽂&#xff0c;是⼀个独⽴的渲染…...

6.1 安全漏洞与网络攻击

数据参考&#xff1a;CISP官方 目录 安全漏洞及产生原因信息收集与分析网络攻击实施后门设置与痕迹清除 一、安全漏洞及产生原因 什么是安全漏洞 安全漏洞也称脆弱性&#xff0c;是计算机系统存在的缺陷 漏洞的形式 安全漏洞以不同形式存在漏洞数量逐年递增 漏洞产生的…...

STM32--EXTI外部中断

前文回顾---STM32--GPIO 相关回顾--有关中断系统简介 目录 STM32中断 NVIC EXTI外部中断 AFIO EXTI框图 旋转编码器简介 对射式红外传感器工程 代码&#xff1a; 旋转编码器工程 代码&#xff1a; STM32中断 先说一下基本原理&#xff1a; 1.中断请求发生&#xff1a…...

Python + Selenium 处理浏览器Cookie

工作中遇到这么一个场景&#xff1a;自动化测试登录的时候需要输入动态验证码&#xff0c;由于某些原因&#xff0c;需要从一个已登录的机器上&#xff0c;复制cookie过来&#xff0c;到自动化这边绕过登录。 浏览器的F12里复制出来的cookie内容是文本格式的&#xff1a; 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 (阿波罗)是一个开放的、完整的、安全的平台&#xff0c;将帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统&#xff0c;快速搭建一套属于自己的自动驾驶系统。 开放能力、共享资源、加速创新、持续共赢是 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.安装编译环境软件参考&#xff1a; 1.找到和ubuntu内核版本相同的内核源码包 4.15.0-112.113 : linux package : Ubuntu (launchpad.net) 2.下载下面三个文件 3.相关步骤 uname -r #查看内核…...

AI 绘画Stable Diffusion 研究(九)sd图生图功能详解-老照片高清修复放大

大家好&#xff0c;我是风雨无阻。 通过前面几篇文章的介绍&#xff0c;相信各位小伙伴&#xff0c;对 Stable Diffusion 这款强大的AI 绘图系统有了全新的认知。我们见识到了借助 Stable Diffusion的文生图功能&#xff0c;利用简单的几个单词&#xff0c;就可以生成完美的图片…...

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支持的复杂参数--自定义对象参数-自动封装

&#x1f600;前言 本篇博文是关于SpringBoot 在响应客户端请求时支持的复杂参数和自定义对象参数&#xff0c;希望您能够喜欢&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章…...

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按键&#xff0c;再接上USB接口到电脑 2.2 刷入固件 2.3 Vivado USB 驱动 2.3.1 打开Zadig驱动工具 2.3…...

【工具】Python从临时邮箱获取验证码

安装好依赖库之后代码可直接运行&#xff0c; 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" # 临…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...