zhxy-desk/pages/studentRanked/stuDraggable.vue

<template>
	<view class="draggable">
		<Draggable @start="handleRemove" @end="handleRemove1" style="width: 100%;display: flex;" v-model="listData" animation="300">
			<view style="display: flex;"  v-for="(item,index) in listData" :key="item.id" class="group">



				<view  class="">
					<view :id='item2.id' v-for="(item2,index2) in item.nodes" :key="index2">
						<view class="">
							<image style="width: 90rpx;height: 90rpx;" src="@/static/image/female.png" mode=""></image>
						</view>
						<view class="" style="font-size: 11px;">
							{{item2.title}}
						</view>
					</view>
				</view>
				<!-- <draggable @start="handleRemove" @change='change' @end="handleRemove1" group="site" animation="300"
					v-model="item.nodes">
					
				</draggable> -->

			</view>



		</Draggable>
	</view>
</template>

<script>
	import Draggable from "@/components/vuedraggable/src/vuedraggable.js";
	export default {
		components: {
			Draggable,
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				info: {
					addId: '',
					removedId: ''
				},
				dragOptions: {

					dragClass: "topic-dragging",

					animation: 200,

					easing: "ease-in-out",
				},
				listData: []
			};
		},
		methods: {

			handleRemove1(item) {
				this.$emit('change', this.listData)
			},
			handleRemove(item) {

			},
			change(item) {

			}
		},
		watch: {
			list() {
				this.listData = this.list.concat()

			}
		},
		mounted() {
			this.listData = this.list.concat()

		}
	}
</script>

<style lang="scss" scoped>
	.draggable {
		width: 720rpx;

	}

	.group {
		width: 12.5%;
		text-align: center;
		font-size: 12px;
	}

	.draggable-item {
		border: 1px solid #333;
		font-size: 12px;
	}

	.border {
		border-right: 1px dotted #999;
	}
</style>