装修拖拽

.env.development

@@ -2,8 +2,8 @@
 ENV = 'development'
 
 // api接口请求地址
-//VUE_APP_BASE_API = 'https://b2b2c-platform.mall4j.com/apis'
-VUE_APP_BASE_API = 'http://127.0.0.1:8088'
+VUE_APP_BASE_API = 'http://lymall-platform.58for.com/apis'
+//VUE_APP_BASE_API = 'http://127.0.0.1:8088'
 
 // 客服api接口请求地址
 //VUE_APP_IM_API = 'https://b2b2c-im.mall4j.com'

src/views/modules/platform/feature/create/edit/components/goods/index.vue

@@ -67,19 +67,23 @@
           <el-form ref="formData" :model="formData" label-position="left" class="goods-select-form">
             <el-form-item :label="$i18n.t('shopFeature.goods.prod')" class="goods-select-con">
               <div class="goods-select-list">
+                <transition-group>
                 <div v-for="(item,index) in goodsList"
                     :key="index"
                     class="goods-select-item">
+                  <div  @dragenter="dragenter($event, index)" @dragover="dragover($event, index)" @dragstart="dragstart(index)" draggable >
                   <div class="goods-select-item-img"
                       :class="{'goods-empty': !goodsList[0].prodId}"
                       :style="{backgroundImage:'url('+item.pic+')'}"></div>
                   <span class="close-item"
                         @click="goodsList.splice(index,1)">x</span>
+                  </div>
                 </div>
+                </transition-group>
                 <div class="goods-select-item">
                   <div class="goods-select-item-img add-btn"
-                      @click="selectProdHandle">
-                      <i class="el-icon-plus"></i>
+                       @click="selectProdHandle">
+                    <i class="el-icon-plus"></i>
                   </div>
                 </div>
               </div>
@@ -121,6 +125,8 @@ export default {
   props: {},
   data () {
     return {
+      dragIndex: '',
+      enterIndex: '',
       commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
       dialogChooseGoods: false,
       isGetChooseData: false, // 是否该是获取选择的数据
@@ -228,6 +234,23 @@ export default {
     }
   },
   methods: {
+    dragstart(index) {
+      this.dragIndex = index;
+    },
+    dragenter(e, index) {
+      e.preventDefault();
+      // 避免源对象触发自身的dragenter事件
+      if (this.dragIndex !== index) {
+        const moving = this.goodsList[this.dragIndex];
+        this.goodsList.splice(this.dragIndex, 1);
+        this.goodsList.splice(index, 0, moving);
+        // 排序变化后目标对象的索引变成源对象的索引
+        this.dragIndex = index;
+      }
+    },
+    dragover(e, index) {
+      e.preventDefault();
+    },
     // 选择商品操作
     selectProdHandle () {
       this.dialogChooseGoods = true