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

  1. sortable下载到本地 renderjs只支持H5和App-vue,不支持小程序和App-nvue开发

  2. 下载好后,在html代码处,找到你要拖拽排序的元素的父元素,给它设置一个id,我这边设置的就是'sort' ,然后 给要拖拽的元素设置:data-id 它的作用是,决定了拖拽结束后返回给你一个怎样的数组,传item.id,它就会自动在拖拽结束后返回给你一个后排序好的id数组. 然后我们就可以拿去处理数据,发请求保存顺序啦!

    html 复制代码
    <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:

    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标签:

    javascript 复制代码
    <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中:

    javascript 复制代码
    changeSort(e) {
    		console.log(e)
    		this.flag = true
    		this.updatelist = e.join(',')
    	},

    拖拽后打印出来的e就是有已经排序好的每一项的id组成的数组。

相关推荐
大G哥3 分钟前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext4 分钟前
html初识
前端·html
小小小小宇16 分钟前
一个功能相对完善的前端 Emoji
前端
m0_6278275217 分钟前
vue中 vue.config.js反向代理
前端
Java&Develop19 分钟前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk22 分钟前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务
摆烂工程师31 分钟前
全网最详细的5分钟快速申请一个国际 “edu教育邮箱” 的保姆级教程!
前端·后端·程序员
HhhDreamof_35 分钟前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya39 分钟前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn011 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js