uniapp 拖拽排序

1.拖拽排序 使用 sortablejs库

复制代码
npm install sortablejs --save-dev

<template>
	<view id="list">
		<view v-for="(item, index) in list" :key="item.id" class="item">
			{{ item.name }}
		</view>
	</view>
</template>

<script>
	import Sortable from "sortablejs";

	export default {
		data() {
			return {
				list: [{
						id: 1,
						name: "列表项1"
					},
					{
						id: 2,
						name: "列表项2"
					},
					{
						id: 3,
						name: "列表项3"
					},
					{
						id: 5,
						name: "列表项5"
					},{
						id: 6,
						name: "列表项6"
					},{
						id: 7,
						name: "列表项7"
					},{
						id: 8,
						name: "列表项8"
					},{
						id: 9,
						name: "列表项9"
					},{
						id: 10,
						name: "列表项10"
					},{
						id: 11,
						name: "列表项11"
					},{
						id: 12,
						name: "列表项12"
					},{
						id: 13,
						name: "列表项13"
					},{
						id: 14,
						name: "列表项14"
					}
				]
			};
		},
		mounted() {
			this.initSortable();
		},
		methods: {
			initSortable() {
				const list = document.getElementById("list");
				new Sortable(list, {
					animation: 150,
					onUpdate: this.handleUpdate
				});
			},
			handleUpdate(event) {
				const {
					oldIndex,
					newIndex
				} = event;
				const item = this.list.splice(oldIndex, 1)[0];
				this.list.splice(newIndex, 0, item);
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
	}

	.item {
		padding: 10px;
		margin: 5px 0;
		background-color: #f0f0f0;
		border: 1px solid #ccc;
		cursor: pointer;
	}
</style>

2.拖拽到指定位置并停留

复制代码
<template>
  <view class="container">
    <movable-area class="area">
      <movable-view
        v-for="(item, index) in list"
        :key="item.id"
        :x="0"
        :y="item.y"
        direction="vertical"
        @change="handleMove(index, $event)"
        class="item"
      >
        {{ item.name }}
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "列表项1", y: 0 },
        { id: 2, name: "列表项2", y: 50 },
        { id: 3, name: "列表项3", y: 100 },
        { id: 4, name: "列表项4", y: 150 }
      ]
    };
  },
  methods: {
    handleMove(index, event) {
      const { y } = event.detail;
      this.list[index].y = y;
      this.sortList();
    },
    sortList() {
      this.list.sort((a, b) => a.y - b.y);
    }
  }
};
</script>

<style scoped>
.container {
  height: 300px;
}
.area {
  width: 100%;
  height: 100%;
}
.item {
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
}
</style>
相关推荐
today喝咖啡了吗4 分钟前
uniapp,Anroid10+版本如何保存图片并删除
uni-app
为风而战2 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
雪碧聊技术6 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
@Dream_Chaser6 小时前
uniapp页面间通信
uni-app
@Dream_Chaser11 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
鱼是一只鱼啊11 小时前
uniapp移动端地图提示鉴权失败请传入正确的key问题处理
uni-app
毛毛三由11 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
雪碧聊技术13 小时前
uniapp简介
uni-app·hbuilder
一只一只妖13 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
y东施效颦17 小时前
uni-app uni-push 2.0推送图标不展示问题
uni-app·github