I solved the problem of slow uploading pictures last time. Manager Cao called me again yesterday and asked me if I could drag and sort pictures.

Drag and drop the sorting

  • Install drag and drop plug-ins
npm install vuedraggable
Copy the code
  • main.jsThe introduction of the plugin
// Drag an image
import vuedraggable from 'vuedraggable'

// Global component mount
Vue.component('vuedraggable', vuedraggable)
Copy the code
  • Component codeimgUpload.vue, component pathmanage-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.i mage', '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>Copy the code

reference

Vue Elementui implements drag-and-drop sorting after uploading images

Vue +elementui uses the VueDraggable plugin for drag-and-drop sorting of image files

The source address