页面修改

src/components/WebSet/WebSiteEdit.vue

@@ -52,6 +52,7 @@
     width: 800px;
     border: 1px solid #d2d6de;
     overflow-y: auto;
+    min-height: 725px;
     height: 725px;
     margin: 0 20px;
     background-color: #ddd;
@@ -153,7 +154,8 @@
     font-size: 14px;
     margin-left: 20px;
   }
-  .ui-sortable-handle{
+
+  .ui-sortable-handle {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -162,9 +164,11 @@
     background-color: #eee;
     cursor: move;
   }
-  .ui-sortable-handle i{
-    font-size:25px;
+
+  .ui-sortable-handle i {
+    font-size: 25px;
   }
+
 </style>
 <template>
   <div class="WebSiteEdit">
@@ -177,19 +181,19 @@
           </el-option>
         </el-select>
         <div class="temp-list-wrap">
-          <div v-for="(subItem,subIndex) in detailsList" class="temp-list-item" :key="subIndex" 
-            draggable="true" @dragstart="dragLeftStart($event,subItem)">
+          <div v-for="(subItem,subIndex) in detailsList" class="temp-list-item" :key="subIndex" draggable="true"
+            @dragstart="dragLeftStart($event,subItem)" @dragend="dragendLeft($event,subItem)">
             <img v-if="subItem.TemplateData&&subItem.TemplateData.CoverImg" :src="subItem.TemplateData.CoverImg"
               :alt="subItem.SubTemplateName" />
             <div class="temp-font">{{subItem.SubTemplateName}}</div>
           </div>
         </div>
       </div>
-      <div class="WebSite_right">
-        <div class="WebSite_right_preview">
-          <div v-for="(item,index) in dataList" draggable="true" @drop="drop($event,index)" @dragstart="handleDragStart($event, item)"
-            @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item)"
-            @dragend="handleDragEnd($event, item)" :key="index">
+      <div class="WebSite_right" draggable="true" @drop="drop($event,0)">
+        <div class="WebSite_right_preview" @drop="drop($event,0)">
+          <div v-for="(item,index) in dataList" draggable="true" @drop="drop($event,index)"
+            @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">
@@ -307,10 +311,10 @@
         //当前编号的插件
         currentEditItem: {},
         dragging: null,
-        commonTitle:'',
-        dragObj:{},
+        commonTitle: '',
+        dragObj: {},
 
-        isDraggable:true,
+        isDraggable: true,
       };
     },
     created() {},
@@ -334,25 +338,39 @@
       otherdialog
     },
     methods: {
+      dragendLeft(e, item) {
+        console.log("dragendLeft", e);
+        var obj = {
+          Id: item.TemplateKey,
+          plugData: item.TemplateData,
+          isShelves: 0
+        };
+        this.dragObj=obj;
+        this.drop(e,this.dataList.length);
+      },
       //右边上下拖动开始
       handleDragStart(e, item) {
-        if(this.isDraggable){
+        console.log("handleDragStart")
+        if (this.isDraggable) {
           this.dragging = item;
         }
       },
       handleDragEnd(e, item) {
-        if(this.isDraggable){
+        console.log("handleDragEnd")
+        if (this.isDraggable) {
           this.dragging = null
         }
       },
       //首先把div变成可以放置的元素，即重写dragenter/dragover
       handleDragOver(e) {
-        if(this.isDraggable){
+        console.log("handleDragOver")
+        if (this.isDraggable) {
           e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
         }
       },
       handleDragEnter(e, item) {
-        if(this.isDraggable){
+        console.log("handleDragEnter")
+        if (this.isDraggable) {
           e.dataTransfer.effectAllowed = "move" //为需要移动的元素设置dragstart事件
           if (item === this.dragging) {
             return
@@ -369,7 +387,7 @@
       showDialog(item) {
         this.isShowDialog = true;
         this.currentEditItem = item;
-        this.commonTitle=item.plugData.Title;
+        this.commonTitle = item.plugData.Title;
         this.currentEditItemData = JSON.parse(JSON.stringify(item.plugData));
       },
       //获取数据
@@ -394,27 +412,31 @@
         this.dataList.push(obj);
       },
       //从左拖动到右边开始
-      dragLeftStart(ev,item){
-        this.isDraggable=false;
+      dragLeftStart(ev, item) {
+        console.log("dragLeftStart")
+        this.isDraggable = false;
         var obj = {
           Id: item.TemplateKey,
           plugData: item.TemplateData,
           isShelves: 0
         };
-        this.dragObj=obj;
-        if(this.dataList.length==0){
-          if(!this.isDraggable){
+        this.dragObj = obj;
+        if (this.dataList.length == 0) {
+          if (!this.isDraggable) {
             this.dataList.push(this.dragObj);
-            this.isDraggable=true;
+            this.isDraggable = true;
           }
         }
       },
       //从左拖动到右边结束
-      drop(ev,index){
-        if(!this.isDraggable){
-          this.dataList.splice(index,0,this.dragObj);
+      drop(ev, index) {
+        console.log("ev", ev);
+        console.log("index", index);
+        if (!this.isDraggable) {
+          this.dataList.splice(index, 0, JSON.parse(JSON.stringify(this.dragObj)));
         }
-        this.isDraggable=true;
+        this.dragObj = {};
+        this.isDraggable = true;
       },
       //获取下拉框
       getTemplate() {
@@ -449,7 +471,6 @@
       //数据改变
       initData(tempData) {
         this.dataList = tempData;
-        console.log(this.dataList,'datalist');
       }
     },
     mounted() {