uniapp实现相关元素的拖拽排序兼容app和H5

grtjh203

已于 2024-01-15 10:07:49 修改

阅读量592

点赞数 8

文章标签： uni-app 前端

于 2024-01-15 10:07:10 首次发布

本文链接：https://blog.csdn.net/qq_59297167/article/details/135594568

版权

//先下载sortablejs插件

<view class="tag">
		<view class="title">个人特色:<text  @click="inputDialogToggle" style="display: inline-block; margin-right: 20rpx;float: right;background-color:#ff9d00;padding: 10rpx 30rpx;border-radius: 20rpx; color: #fff;">添加</text></view>
		<view class="tag-list" id="foo">
		<view class="tag-item" v-for="(item,index) in tags" :key="index">{{item}}
			<uni-icons class="icon" type="clear" color="rgb(249 22 22)" size="15"  @click="delTag(index)"></uni-icons>
		</view>
		</view>
			
</view>

.tag{
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 4rpx 4rpx 6rpx 4rpx #eee;
			border-radius: 16rpx;
			.tag-list{
				display: flex;
				flex-wrap: wrap;
				.tag-item{
					position: relative;
					padding: 10rpx 10rpx 10rpx 10rpx;
					margin: 20rpx;
					height: 20rpx;
					line-height: 20rpx;
					background-color: #fff;
					border: 2rpx solid  #e43d33;
					color: #e43d33;
					font-size: 24rpx;
					.icon{
						position: absolute;
						top: -10rpx;
						right: -18rpx;
						 background-color: white;
					}
					
				}
				
			}
			.title{
				color: #606266;
				height: 72rpx;
			}
		}

//h5中
	mounted() {
			// #ifdef H5
		Sortable.create(document.getElementById("foo"), {
			animation: 150, //动画参数
			onAdd: function(evt) {
				//拖拽时候添加有新的节点的时候发生该事件
				console.log("onAdd.foo:", [evt.item, evt.from]);
			},
			onUpdate: function(evt) {
				//拖拽更新节点位置发生该事件
				console.log("onUpdate.foo:", [evt.item, evt.from]);
			},
			onRemove: function(evt) {
				//删除拖拽节点的时候促发该事件
				console.log("onRemove.foo:", [evt.item, evt.from]);
			},
			onStart: function(evt) {
				//开始拖拽出发该函数
				console.log("onStart.foo:", [evt.item, evt.from]);
			},
			onSort: function(evt) {
				//发生排序发生该事件
				console.log("onSort.foo:", [evt.item, evt.from],evt.from.innerText);
				// 索引5移到索引4的位置，索引变化
				// evt.newDraggableIndex -- 4
				// evt.newIndex  --4
				// evt.oldDraggableIndex  --5
				// evt.oldIndex   --5
			},
			onEnd: function(evt) {
				//拖拽完毕之后发生该事件
				console.log("onEnd.foo:", [evt.item, evt.from]);
			},
			})
				// #endif
		},

//在app中要再写一个script   lang="renderjs"
<script module="Sortable" lang="renderjs">
	// #ifdef APP-PLUS
	import Sortable from 'sortablejs'
	export default {
		mounted(){
			Sortable.create(document.getElementById("foo"), {
					animation: 150, //动画参数
					onAdd: function(evt) {
						//拖拽时候添加有新的节点的时候发生该事件
						console.log("onAdd.foo:", [evt.item, evt.from]);
					},
					onUpdate: function(evt) {
						//拖拽更新节点位置发生该事件
						console.log("onUpdate.foo:", [evt.item, evt.from]);
					},
					onRemove: function(evt) {
						//删除拖拽节点的时候促发该事件
						console.log("onRemove.foo:", [evt.item, evt.from]);
					},
					onStart: function(evt) {
						//开始拖拽出发该函数
						console.log("onStart.foo:", [evt.item, evt.from]);
					},
					onSort: function(evt) {
						//发生排序发生该事件
						console.log("onSort.foo:", [evt.item, evt.from],evt.from.innerText);
						// 索引5移到索引4的位置，索引变化
						// evt.newDraggableIndex -- 4
						// evt.newIndex  --4
						// evt.oldDraggableIndex  --5
						// evt.oldIndex   --5
					},
					onEnd: function(evt) {
						//拖拽完毕之后发生该事件
						console.log("onEnd.foo:", [evt.item, evt.from]);
					},
					
			})
		},
	}
	// #endif
</script>