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组成的数组。

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

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

相关文章

Centos7安装docker后默认开启docker0的网卡|卸载默认网卡

一&#xff1a; 停掉服务 systemctl stop docker [rootwww ~]# systemctl stop docker [rootwww ~]# systemctl status docker ● docker.service - Docker Application Container Engine Loaded: loaded (/usr/lib/systemd/system/docker.service; enabled; vendor prese…

神经网络基础-神经网络补充概念-27-深层网络中的前向传播

概念 深层神经网络中的前向传播是指从输入数据开始&#xff0c;逐层计算每个神经元的输出值&#xff0c;直到得到最终的预测值。 一般步骤 1输入数据传递&#xff1a; 将输入数据传递给网络的输入层。输入数据通常是一个特征矩阵&#xff0c;每一列代表一个样本&#xff0c;…

【bug】Unity无法创建项目

bug UnityHub无法创建项目 UnityHub无法创建项目 出现的问题&#xff1a;在创建新项目时弹出来一个 无法创建项目 尝试的方法&#xff1a; 刷新许可证 ❌没用退出账号重新登陆 ❌没用重启电脑 ❌没用 最后发现是什么问题呢&#xff1f; 2021.3.3这个版本我之前在资源管理器中…

SpringBoot概述及项目的创建使用

文章目录 一. Spring Boot概述1. 什么是Spring Boot&#xff1f;2. Spring Boot的优点 二. Spring Boot项目的创建1. 使用IDEA创建1.1. 准备工作1.2. 创建运行Spring Boot项目1.3. 进行Web交互1.4. 目录工程介绍1.5. 项目快速添加依赖1.6. 防止配置文件乱码所需的配置1.7. Spri…

Docker实战专栏简介

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

【iMessage苹果推?IM推送】群控脚本当Apple APNS推送服务器从您的应用程序接吸收注册消息时,它将为您回到一串devicetoken

推荐内容IMESSGAE相关 作者✈️IMEAE推荐内容iMessage苹果推软件 *** 点击即可查看作者要求内容信息作者✈️IMEAE推荐内容1.家庭推内容 *** 点击即可查看作者要求内容信息作者✈️IMEAE推荐内容2.相册推 *** 点击即可查看作者要求内容信息作者✈️IMEAE推荐内容3.日历推 *** …

Rust软件外包开发语言的特点

Rust 是一种系统级编程语言&#xff0c;强调性能、安全性和并发性的编程语言&#xff0c;适用于广泛的应用领域&#xff0c;特别是那些需要高度可靠性和高性能的场景。下面和大家分享 Rust 语言的一些主要特点以及适用的场合&#xff0c;希望对大家有所帮助。北京木奇移动技术有…

MongoDB:简单的增删改查操作

一.概述 本篇文章介绍在Navicat中对MongoDB数据库进行增删改查操作,在后面会介绍在Spring Boot中使用MongoTemplate对MongoDB数据库进行相关操作.如有必要可以先看看前面几篇文章. MongoDB:MySQL,Redis,ES,MongoDB的应用场景 MongoDB:数据库初步应用 二.在Navicat进行增删改…

linux系统服务学习(七)NFS服务、DHCP服务

文章目录 一、NFS服务概述1、任务背景2、环境准备3、NFS概述4、NFS组成5、与NFS相关的软件包6、安装NFS软件7、NFS的配置文件 二、NFS实验1、搭建NFS服务器2、编写NFS主配置文件3、启动相关的NFS服务4、搭建Web服务器5、在Web服务器中挂载NFS6、上传aws.mp4视频到NFS服务器的/s…

人工智能学习框架—飞桨Paddle人工智能

1.人工智能框架 机器学习的三要素&#xff1a;模型、学习策略、优化算法。 当我们用机器学习来解决一些模式识别任务时&#xff0c;一般的流程包含以下几个步骤&#xff1a; 1.1.浅层学习和深度学习 浅层学习(Shallow Learning)&#xff1a;不涉及特征学习&#xff0c;其特征…

Vue3 setup中使用$refs

在 Vue 3 中的 Composition API 中&#xff0c;$refs 并不直接可用于 setup 函数。这是因为 $refs 是 Vue 2 的实例属性&#xff0c;而在 Vue 3 中&#xff0c;setup 函数是与模板实例分离的&#xff0c;不再使用实例属性。 实际工作中确实有需求&#xff0c;在setup 函数使用…

迪瑞克斯拉算法

迪锐克斯拉算法 简单来说就是在有向图中&#xff0c;给定一个图中具体的出发点&#xff0c;从这个点出发能够到达的所有的点&#xff0c;每个点的最短距离是多少。到不了的点&#xff0c;距离则是正无穷。有向&#xff0c;无负权重&#xff0c;可以有环。 所以说&#xff0c;迪…

流媒体服务-传输延时(SEI插帧)

什么是延时 很多小伙伴认为&#xff0c;当推流端和拉流端显示的时间不一致&#xff0c;即为延时。 其实这种看法是比较片面的&#xff0c;不同的播放器&#xff0c;对同一路流进行测试&#xff0c;可能会得到不同的结果。 一般来说&#xff0c;延时为以下几个部分的累加组成 …

【Android】解决Lint found fatal errors while assembling a release target

报错信息&#xff1a; Android在debug模式下打包没有问题&#xff0c;但是在打包release版本时出现一下问题&#xff1a; 结果图 原因 我项目的原因是因为把正式、测试地址放到代码里了&#xff0c;忘记选中正式环境的地址&#xff0c;导致打正式包有问题&#xff1b;大家如果…

Shell编程学习之变量的使用

查看当前系统使用的命令解释器&#xff1a; linuxubuntu:~$ echo $SHELL /bin/bashshell命令&#xff1a;在终端上使用的命令&#xff0c;例如 vi a.cgcc a.c./a.outshell脚本&#xff1a;其是一个.sh文件&#xff0c;里面都是命令的集合&#xff0c;以及一些复杂的逻辑&#…

RuntimeException详解

当我们谈论Java编程中的异常处理时&#xff0c;RuntimeException是一个关键的概念&#xff0c;它在代码开发和维护中扮演着重要的角色。本文将深入探讨RuntimeException&#xff0c;了解它的特点、使用场景以及如何在代码中处理它。 什么是RuntimeException&#xff1f; 在Ja…

复合 类型

字符串和切片 切片 切片的作用是允许你引用集合中部分连续的元素序列&#xff0c;而不是引用整个集合。 例如&#xff1a; let s String::from("hello world");let hello &s[0..5]; // 切片 [0,5) 等效于&s[..5] let world &s[6..11]; // 切片…

线性动态规划入门之挖地雷

P2196 [NOIP1996 提高组] 挖地雷 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 这个题有点坑&#xff0c;就是说你只能往下挖&#xff0c;可以理解成单项路径。比如1与3之间是1代表1可以到3而3不可以到1。所以我们来思考dp把。怎么写&#xff1f;我们这么想假设1与2&#xf…

gitee上传一个本地项目到一个空仓库

gitee上传一个本地项目到一个空仓库 引入 比如&#xff0c;你现在本地下载了一个半成品的框架&#xff0c;现在想要把这个本地项目放到gitee的仓库上&#xff0c;这时就需要我们来做到把这个本地项目上传到gitee上了。 具体步骤 1. 登录码云 地址&#xff1a;https://gite…

【Pytroch】基于支持向量机算法的数据分类预测(Excel可直接替换数据)

【Pytroch】基于支持向量机算法的数据分类预测(Excel可直接替换数据) 1.模型原理2.数学公式3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果1.模型原理 支持向量机(Support Vector Machine,SVM)是一种强大的监督学习算法,用于二分类和多分类问题。它的主要思想是找…