修改

src/components/WebSet/WebSiteEdit.vue

@@ -176,8 +176,11 @@
           </el-option>
         </el-select>
         <div class="temp-list-wrap">
-          <div v-for="(subItem,subIndex) in detailsList" class="temp-list-item" :key="subIndex"
-            @click="AddData(subItem)">
+          <div v-for="(subItem,subIndex) in detailsList" class="temp-list-item" :key="subIndex" 
+            draggable="true" @dragstart="dragLeftStart($event,subItem)" @dragover="onDragover($event,subItem)">
+          <!-- <div v-for="(subItem,subIndex) in detailsList" class="temp-list-item" :key="subIndex" 
+            draggable="true" @dragstart="dragLeftStart($event,subItem)"
+            @click="AddData(subItem)"> -->
             <img v-if="subItem.TemplateData&&subItem.TemplateData.CoverImg" :src="subItem.TemplateData.CoverImg"
               :alt="subItem.SubTemplateName" />
             <div class="temp-font">{{subItem.SubTemplateName}}</div>
@@ -186,9 +189,13 @@
       </div>
       <div class="WebSite_right">
         <div class="WebSite_right_preview">
-          <div v-for="(item,index) in dataList" draggable="true" @dragstart="handleDragStart($event, item)"
+          <!-- <div v-for="(item,index) in dataList" draggable="true" @dragstart="handleDragStart($event, item)"
+            @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item)"
+            @dragend="handleDragEnd($event, item)" :key="index"> -->
+          <div v-for="(item,index) in dataList" draggable="true" @drop="drop($event,item,index)" @dragover="allowDrop($event)" @dragstart="handleDragStart($event, item)"
             @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item)"
             @dragend="handleDragEnd($event, item)" :key="index">
+
             <div class="diy-component-preview">
               <div class="WebSite_item">
                 <div class="ui-sortable-handle">
@@ -306,7 +313,8 @@
         //当前编号的插件
         currentEditItem: {},
         dragging: null,
-        commonTitle:''
+        commonTitle:'',
+        dragObj:{},
       };
     },
     created() {},
@@ -379,6 +387,26 @@
         };
         this.dataList.push(obj);
       },
+
+      dragLeftStart(ev,item){
+        var obj = {
+          Id: item.TemplateKey,
+          plugData: item.TemplateData,
+          isShelves: 0
+        };
+        this.dragObj=obj;
+      },
+      onDragover(ev){
+        ev.stopPropagation();
+      },
+      allowDrop(ev){
+        ev.preventDefault();
+      },
+      drop(ev,item,index){
+        if(index){
+          this.dataList.splice(index,0,this.dragObj);
+        }
+      },
       //获取下拉框
       getTemplate() {
         this.apipost(
@@ -412,6 +440,7 @@
       //数据改变
       initData(tempData) {
         this.dataList = tempData;
+        console.log(this.dataList,'datalist');
       }
     },
     mounted() {