Uniapp + Sortable实现首页功能应用管理(可拖拽排序，调整应用位置次序）

已于 2023-09-18 13:45:30 修改
阅读量1k 收藏 14
点赞数 2
分类专栏： uni-app 文章标签： uni-app
于 2023-09-18 13:39:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanglinsen123/article/details/132841746
版权

效果展示

最后实现效果：实现首页应用列表的添加、移除以及拖拽排序的功能。

准备工作

引入Sortable插件，Sortable插件是一款轻量级的拖拽排序插件，它可以轻松实现列表、表格、以及树结构的元素的拖拽排序。

这里可利用npm安装相关依赖,命令如下。

npm install sortablejs --save

对于uniapp的项目，只需在页面引入sortablejs里面的Sortable.min.js文件即可。

拖拽实现

1. Sortable的拖拽功能是基于HTML5的Drag and Drop API实现的。这个API允许我们将元素从一个位置拖动到另一个位置，并在过程中触发一系列事件，其实，拖拽元素就是一个DOM元素。

2. 对于uniapp的项目而言，由于它并没有document，不能进行相关的DOM操作，因此官方推出了renderjs方案来解决这一问题。

首先需要绑定拖拽区域的id,然后给拖拽的元素拖拽属性data-id赋值，代表其唯一性，最后调用Sortable.min.js实现拖拽。

<view class="menue-list-item" id="sort">
	<view class="list-item-one" :data-id="item.name" v-for="(item,index) in ofenlist" :key="index" >
		<image :src="item.iconurl"></image>
		<image class="delete-icon" src="../../static/delete.png"></image>
		<view class="list-item-name">{{ item.name }}</view>
	</view>
</view>
<script module='sortable' lang="renderjs">
	export default {
		mounted() {
			this.initSortable()
		},
		methods: {
			initSortable() {
				if (typeof window.Sortable === 'function') {
					this.setSortable()
				} else {
					const script = document.createElement('script')
					script.src = 'static/js/Sortable.min.js'
					script.onload = this.setSortable.bind(this)
					document.head.appendChild(script)
				}
			},
			setSortable() {
				let option = {
					 //动画参数
					animation: 300,
					onEnd: (e) => {
						// 拖拽完成后回调
						this.$ownerInstance.callMethod('changeSort', sortable.toArray());
					}
				}
				let sortable = Sortable.create(document.getElementById('sort'), option);
			},
		}
	}
</script>

完整代码

以下是上述实现效果示例的完整代码，其他的拖拽事件以及拖拽动画，请前往官网查看。

Sortable.js中文网

<template>
	<view class="menue-page">
		<view class="menue-one-type">
			<view class="ofen-type-name">
				<view style="font-weight: bold">首页应用</view>
				<view>
					<button v-if="!editofen" type="primary" @click="editofen=true" size="mini">编辑</button>
					<button v-if="editofen" type="primary" size="mini" @click="editofen=false">保存</button>
				</view>
			</view>
			<!-- 使用v-show 不能删除dom id选择器 ,从而实现点击编辑后才可以拖拽-->
			<view class="menue-list-item" id="sort" v-show="editofen">
				<view class="list-item-one" :data-id="item.name" v-for="(item,index) in ofenlist" :key="index" @click="deleteofen(item)">
					<image :src="item.iconurl"></image>
					<image class="delete-icon" src="../../static/delete.png"></image>
					<view class="list-item-name">{{ item.name }}</view>
				</view>
			</view>
			<view class="menue-list-item" v-show="!editofen">
				<view class="list-item-one" v-for="(item,index) in ofenlist" :key="index">
					<image :src="item.iconurl"></image>
					<view class="list-item-name">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="menue-one-type" v-for="(item,index) in menuelist" :key="index">
			<view class="type-name">{{ item.typename }}</view>
			<view class="menue-list-item">
				<view class="list-item-one" v-for="(item2,index2) in item.childlist" :key="index2" @click="addofen(item2)">
					<image :src="item2.iconurl"></image>
					<!-- 判断该应用是否在首页应用列表中，从而是否显示右上角添加图标 -->
					<image v-if="editofen && isofen(item2)"  class="delete-icon" src="../../static/add.png"></image>
					<view class="list-item-name">{{ item2.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: '1',
				editofen: false,
				// 首页应用列表
				ofenlist: [
					{
						'name': '应用2',
						'iconurl': '../../static/logo.png',
					},
					{
						'name': '应用3',
						'iconurl': '../../static/logo.png',
					},
					{
						'name': '应用5',
						'iconurl': '../../static/logo.png'
					}
				],
				// 所有的应用（按类别）列表
				menuelist: [{
						'typename': '应用类别1',
						'childlist': [{
								'name': '应用1',
								'iconurl': '../../static/logo.png',
							},
							{
								'name': '应用2',
								'iconurl': '../../static/logo.png',
							},
							{
								'name': '应用3',
								'iconurl': '../../static/logo.png',
							},
							{
								'name': '应用4',
								'iconurl': '../../static/logo.png',
							},
						]
					},
					{
						'typename': '应用类别2',
						'childlist': [{
								'name': '应用5',
								'iconurl': '../../static/logo.png',
							},
							{
								'name': '应用6',
								'iconurl': '../../static/logo.png',
							},
							{
								'name': '应用7',
								'iconurl': '../../static/logo.png',
							},
							{
								'name': '应用8',
								'iconurl': '../../static/logo.png',
							}
						]
					}
				]

			}
		},
		onLoad() {

		},
		methods: {
			// 拖拽后回调
			changeSort(e) {
				console.log(e)
			},
			// 添加到首页应用
			addofen(e){
				// 先判断应用是否已在首页应用中，在则不添加，不在则添加
				if(this.isofen(e)) this.ofenlist.push(e)
			},
			// 从首页应用中移除
			deleteofen(e){
				this.ofenlist = this.ofenlist.filter(item => item!==e)
			},
			// 判断应用是否已在首页应用中
			isofen(obj){
				if(JSON.stringify(this.ofenlist).indexOf(JSON.stringify(obj)) === -1){
				   return true
				}
				return false
			}
		}
	}
</script>

<script module='sortable' lang="renderjs">
	export default {
		mounted() {
			this.initSortable()
		},
		methods: {
			initSortable() {
				if (typeof window.Sortable === 'function') {
					this.setSortable()
				} else {
					const script = document.createElement('script')
					script.src = 'static/js/Sortable.min.js'
					script.onload = this.setSortable.bind(this)
					document.head.appendChild(script)
				}
			},
			setSortable() {
				let option = {
					 //动画参数
					animation: 300,
					onEnd: (e) => {
						// 拖拽完成后回调
						this.$ownerInstance.callMethod('changeSort', sortable.toArray());
					}
				}
				let sortable = Sortable.create(document.getElementById('sort'), option);
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f4f4f5;
	}

	.menue-page {
		width: 100%;

		.menue-search {
			margin: 20rpx;
		}

		.menue-one-type {
			margin: 20rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 0rpx 20rpx 20rpx;

			.ofen-type-name {
				font-size: 30rpx;
				color: #4f4f4f;
				border-bottom: 1px solid #ececed;
				padding: 20rpx 0rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.type-name {
				font-size: 30rpx;
				font-weight: bold;
				color: #4f4f4f;
				border-bottom: 1px solid #ececed;
				padding: 20rpx 0rpx;
			}

			.menue-list-item {
				display: flex;
				flex-wrap: wrap;

				.list-item-one {
					width: 25%;
					text-align: center;
					margin-top: 35rpx;
					margin-bottom: 15rpx;
					position: relative;
					display: inline-block;

					image {
						width: 65rpx;
						height: 65rpx;
					}

					.delete-icon {
						position: absolute;
						top: -10px;
						right: 0px;
						width: 20px;
						height: 20px;
					}

					.list-item-name {
						font-size: 26rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>

薇森
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue +el + Sortable table列拖拽排序
05-19
vue table 列拖拽排序例子
Vue中使用Sortable的示例代码
08-27
主要介绍了Vue中使用Sortable的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
uniapp实现相关元素的拖拽排序兼容app和H5
qq_59297167的博客
01-15 494
【代码】uniapp实现相关元素的拖动兼容app和H5。
unnapp 小程序长按拖动排序
最新发布
future_1_的博客
04-11 606
【代码】unnapp 小程序长按拖动排序。
table表格排序
07-15
应用示例： var table = $('#sort_table'); //表id //需要排序的表头，以th开头 $('#keyword_num, #impressions, #click, #click_rate, #conversions, #cost, #conversion_unitprice') .each(function(){ var th = $(this), thIndex = th.index(), inverse = false; th.click(function(){ table.find('td').filter(function(){ return $(this).index() === thIndex; }).sortElements(function(a, b){ return parseFloat($.text([a])) > parseFloat($.text([b])) ? inverse ? -1 : 1 : inverse ? 1 : -1; }, function(){ // parentNode is the element we want to move return this.parentNode; }); inverse = !inverse; }); });
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
12-29
vue 使用 sortable 实现 el-table 拖拽排序功能 　　本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能，具体内容如下所示：　　npm 下载：　　npm install sortablejs --save　　引入：　　import Sortable from "sortablejs";　　代码：　　<template>　　 <div class="table">　　 <el-table ref="dragTable" :data="tableData" border :row-class-name="tableRowClassName">　　
移动端列表长按上下拖动排序
10-31
移动端列表长按后，然后可以上下拖动进行排序，主要使用了基于h5 sortTable，然后使用了touch相关事件实现，仅支持移动端,支持安卓和苹果。
uni-app实现简单的列表拖拽排序
LueLueLue77的博客
04-29 4613
uni-app简单实现下，纵向的拖拽排序
uniapp左右拖动换位子
weixin_44766849的博客
12-29 1415
uniapp 左右拖动换位子 删除新增
小程序自定义拖动排序（uniapp)
qq_45314219的博客
10-18 6307
点击拖动：设置可移动区域，循环数组，movable-view写要移动的盒子（用点击事件点击要移动的数据进行克隆，把数据从当前数组中摘取出来放入movable-view进行移动），再利用onChange事件捕捉x,y轴，利用设置的盒子高度和当前获取的y轴数据判断当前数组的下标。2） @touchend（拖动离开事件），movable-view的onChange事件,自定义克隆事件dragChange，自定义顶置事件overheadChange。3.onChange事件捕捉x,y轴，获取移动的下标。
uni-app简单实现一下拖拽排序
热门推荐
LueLueLue77的博客
04-28 1万+
简简单单做一个拖拽排序🤪
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。 =======以下是之前的说明===== 原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
angular-ui-sortable实现可拖拽排序列表
11-26
项目需求，添加列表可拖拽排序功能，谷歌了一下，找到一个Angular的插件：angular-ui-sortable，项目地址：https://github.com/angular-ui/ui-sortable 需要在之前引入jquery，和jquery-ui，否则无法使用。 我们要做的事情，加载数据，拖拽排序并输出当前顺序： js代码： [removed][removed] [removed][removed] [removed][removed] <scri
jQuery-ui插件sortable实现自由拖动排序
10-17
主要为大家详细介绍了jQuery-ui插件sortable实现自由拖动排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端uni-app树形组件 tree组件，可拖拽移动，点击展开收缩，无限添加子集
chenchuang0128的博客
05-26 2350
下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?// 颜色设定 不同颜色寓意不同权重。"name": "其他规模企业","name": "生物与新医药","name": "其他规模企业","name": "新能源汽车","name": "大型企业","name": "中型企业","name": "小型企业","name": "大型企业","name": "中型企业","name": "小型企业","name": "行业分类",
使用 Sortable.js 在 uni App 上实现拖拽排序功能
weixin_53380850的博客
11-02 2999
它可以用来实现这个拖拽的功能。Sortable.js —是一个JavaScript库，用于在现代浏览器和触摸设备上对拖放列表进行重新排序，无需jQuery。特点有：轻量级但功能强大移动列表项时有动画支持触屏设备和大多数浏览器（IE9及以下除外）支持单个列表容器内部拖拽排序，也支持两个列表容器互相拖拽排序支持拖放操作和可选择的文本非常友善的滚动效果基于原生HTML5中的拖放API支持多种框架（Angular、Vue、React等）支持所有的CSS框架，如：Bootstrap。
uniapp拖拽元素交换元素的位置，对元素进行一个排序，兼容H5和App。
qq_59297167的博客
12-05 1000
2、 import Sortable from 'sortablejs'导入插件sortable。1、安装npm install sortablejs --save插件。4、App需要在创建一个script标签，lang=renderjs。
uniapp-自定义拖动布局
主要是学习笔记和一些学习心得~
12-09 1704
本人一开始在想如何实现这种效果的时候，首先想到的是通过css的浮动去实现，通过改变当前的位置来达到物体上的拖动，在两个物体上的碰撞先是通过上面位置拖动去改变，但是发现还有有问题，以为值都是直接赋在物体的宽高上面。后面才发现通过把所有物体的坐标放在一个数组里面，通过拖动某一个物体的时去判断当前拖动位置上是否有物体存在。本篇文章主要内容是实现在两个相同大小(宽高)下进行位置拖动摆放，以及对其他物体摆放位置造成偏移位置的功能效果，但是目前还只能在两个宽高一样的物体进行拖动。后面有更新的话会在这个里面更新~
uni-app引入sortable列表拖拽，兼容App和H5,拖拽排序。
李十三的博客
08-16 1419
作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个github上一个不错的拖拽js库，能满足我们在项目开发中的需要，支持Vue和React，下面是我在uniapp中使用SortableJS的使用详细流程；拖拽后打印出来的e就是有已经排序好的每一项的id组成的数组。SortableJs中文文档。 拖拽排序
vue3+element-plus+Sortable 实现列拖拽功能
05-10
实现列拖拽功能可以使用 SortableJS 库，并结合 Element Plus 的表格组件和 Vue3 的响应式数据。 首先需要在项目中安装 SortableJS： ``` npm install sortablejs --save ``` 然后在需要使用的组件中引入 SortableJS 和 Element Plus 的表格组件： ```javascript import Sortable from 'sortablejs'; import { ElTable, ElTableColumn } from 'element-plus'; ``` 接着，在组件中定义表格数据和表格列，以及拖拽回调函数： ```javascript export default { data() { return { tableData: [ { name: 'John', age: 20, address: 'New York' }, { name: 'Tom', age: 25, address: 'London' }, { name: 'Lucy', age: 18, address: 'Paris' }, { name: 'Lily', age: 22, address: 'Tokyo' } ], tableColumns: [ { label: 'Name', prop: 'name' }, { label: 'Age', prop: 'age' }, { label: 'Address', prop: 'address' } ] }; }, mounted() { // 绑定拖拽回调函数 const el = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody'); Sortable.create(el, { animation: 150, onEnd: evt => { const { newIndex, oldIndex } = evt; const item = this.tableColumns.splice(oldIndex - 1, 1)[0]; this.tableColumns.splice(newIndex - 1, 0, item); } }); }, render() { return ( <ElTable ref="table" data={this.tableData}> {this.tableColumns.map(column => ( <ElTableColumn label={column.label} prop={column.prop}></ElTableColumn> ))} </ElTable> ); } }; ``` 这里使用 `Sortable.create` 方法创建一个拖拽对象，并且绑定了 `onEnd` 回调函数，当拖拽结束后，将表格列数组中的相应元素移动到新位置。 最后渲染表格时，使用 `map` 方法动态创建表格列。 这样就实现了列拖拽功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值