图片实现拖拽排序

上次解决了图片上传慢的问题，昨天曹总又打了一个电话，问我图片能不能拖拽排序。

拖拽排序

• 安装拖拽插件

npm install vuedraggable

• main.js 引入插件

// 图片拖动
import vuedraggable from 'vuedraggable'

// 全局组件挂载
Vue.component('vuedraggable', vuedraggable)

• 组件代码 imgUpload.vue，组件路径 manage-ui/src/components/upload/imgUpload.vue

<template>
	<div class="uploadWrapper">
		<vuedraggable
		      class="vue-draggable"
		      draggable=".draggable-item"
		      tag="ul"
		      v-model="imgList"
		    >
	 <li style="width: 100px; height: 100px;"
	         :key="item + index"
	         class="draggable-item"
	         v-for="(item, index) in imgList"
	       >
	      <el-image :preview-src-list="imgList" :src="item"></el-image>
	 </li>
	 </vuedraggable>
	 <el-button @click='show'>show</el-button>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
		  imgList:['https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa97b2676a3d4774950297c8c439e8bd~tplv-k3u1fbpfcp-watermark.image',
		  'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6de6be3260348b68aba33342d420e39~tplv-k3u1fbpfcp-watermark.image',
		  'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b546d01598404e70a5b23ec7b40785ed~tplv-k3u1fbpfcp-watermark.image'],
	    };
	  },
	  methods: {
	    show(){
			console.log(this.imgList);
		}
	  }
	}
</script>

<style>
	.uploadWrapper li{
		width:70px;
		display: inline-block;
		margin:0 10px;
	}
</style>

参考

vue elementui 实现图片上传后拖拽排序功能

vue+elementui使用vuedraggable插件实现图片文件拖拽排序

源码地址