feat：添加图片拖拽功能

package.json

@@ -47,7 +47,8 @@
     "vue2-org-tree": "^1.3.6",
     "vued3tree": "^5.1.0",
     "vuex": "3.0.1",
-    "xlsx": "^0.11.16"
+    "xlsx": "^0.11.16",
+    "vuedraggable": "^2.23.2"
   },
   "devDependencies": {
     "autoprefixer": "8.5.0",

src/views/goods/infoSet.vue

@@ -35,13 +35,21 @@
         <div class="detail_image">
           <div class="detail_title">{{ `钱币图片：` }}</div>
           <div class="list">
-            <div v-for="(item, index) in imageList" :key="item + index" class="select_item">
-              <img :src="item" class="gallery" @click="handleShowLargeDialog(item)">
-              <div class="edit" @click="handlerChangeImage(item)">编辑</div>
-              <div v-if="imageList.length > 0" class="set" @click="handlerSetMainImage(item, index)">
-                {{ imageMainPosition === index ? '主图' : '设为主图' }}
+            <Draggable
+              v-model="imageList"
+              class="flex f-fw-w img__wrapper"
+              handle=".gallery"
+              anmition="500"
+              delay="20">
+              <div v-for="(item, index) in imageList" :key="item + index" class="select_item">
+                <img :src="item" class="gallery" @click="handleShowLargeDialog(item)">
+                <div class="edit" @click="handlerChangeImage(item)">编辑</div>
+                <div v-if="imageList.length > 0" class="set" @click="handlerSetMainImage(item, index)">
+                  {{ imageMainPosition === index ? '主图' : '设为主图' }}
+                </div>
               </div>
-            </div>
+            </Draggable>
+
           </div>
         </div>
 
@@ -195,6 +203,7 @@ import {
 import CheckLargeImageDialog from './components/CheckLargeImageDialog'
 import CutImageDialog from './components/CutImageDialog'
 import CutEditImageDialog from './components/CutEditImageDialog'
+import Draggable from 'vuedraggable'
 
 export default {
   name: 'InfoSet',
@@ -205,7 +214,8 @@ export default {
     SelectImageDialog,
     VuePictureCut,
     VuePictureCutMask,
-    VuePictureCutMenu
+    VuePictureCutMenu,
+    Draggable
   },
   filters: {
     trimHtml(html_str) {
@@ -413,6 +423,17 @@ export default {
         this.$message.warning('请设置主图')
         return
       }
+
+      if (this.imageList.length) {
+        const list = []
+        for (let i = 0; i < this.imageList.length; i++) {
+          if (this.goodsParams.images.indexOf(this.imageList[i]) !== -1) {
+            list.push(this.imageList[i])
+          }
+        }
+        this.goodsParams.images = list
+      }
+      console.log('========', this.goodsParams.images)
       this.goodsParams.state = 10
       editGoods(this.goodsParams).then(response => {
         this.$message.success('发布成功')