增加外部拖拽功能

增加外部拖拽功能

src/store/modules/template.js

@@ -19,12 +19,13 @@ const state = {
   pageStatus:1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
   menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
   previewStatus:false,//是否预览
+  gridKey:0,//使用gridKey来强制更新视图
   pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
     index:[
       
     ],//首页
     class:[],//分类页
-    list:[],//列表页
+    list:[],//列表页bang
     article:[],//详情页
     search:[],//搜索页
     aloneList:[],//自定义列表页
@@ -49,7 +50,24 @@ const state = {
   departmentList:"",//职能部门
   //2.站点数据 end------------------------------------------------------------>
 
-  //3.网站数据 start------------------------------------------------------------>
+  //3.画布构造 start------------------------------------------------------------>
+  editSectorY:0,//当前组件在画布中的位置
+  mouseXY:{//鼠标位置
+    "x": 12, 
+    "y": 33
+  },
+  DragPos:{//创建的占位符大小
+    "x": null, 
+    "y": null, 
+    "w": 12, 
+    "h": 2, 
+    "i": null
+  },
+  //获得gridlayout对象
+  gridlayoutObj:null,
+  //3.画布构造 end------------------------------------------------------------>
+
+  //4.构造的网站数据 start------------------------------------------------------------>
   editWindowStatus:false,//编辑组件弹出框是否显示
   editComponentWindowStatus:false,//选择组件样式弹出框是否显示
   editWindowTitle:"",//编辑弹出框标题
@@ -60,7 +78,6 @@ const state = {
   editComponentSize:0,//当前组件展示的条数
   editComponentStyle:0,//当前编辑的组件样式
   editWebsiteCategory:[],//当前网站全部关联导航
-
   webSiteData:{
     //1.base网站基本信息
     base:{
@@ -82,16 +99,16 @@ const state = {
       aloneArticle:[],//自定义详情页
     }
   },
-  //3.网站数据 end------------------------------------------------------------>
+  //4.构造的网站数据 end------------------------------------------------------------>
 
-  //4.组件回显数据 start------------------------------------------------------------>
+  //5.组件回显数据 start------------------------------------------------------------>
   componentViewData:{
     pid_arr:[],//导航池
     pageSize:"",//展示条数
     adName:"",//广告名称
     titleName:"",//标题名称
   }
-  //4.组件回显数据 start------------------------------------------------------------>
+  //5.组件回显数据 start------------------------------------------------------------>
 }
 
 const mutations = {
@@ -120,6 +137,7 @@ const mutations = {
   setEditWindowStatus(state,data){
     state.editWindowStatus = true;
     state.editSectorId = data.id;
+    state.editSectorY = data.y;
     state.editDataSort = data.dataSort;
     state.editComponentSort = data.sort;
     state.editComponentType = data.type;
@@ -187,6 +205,10 @@ const mutations = {
   },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>
+  //获得gridlayout对象
+  setGridlayoutObj(state,data){
+    state.gridlayoutObj = data;
+  },
   //添加板块
   addModule(state,data){
     //pageStatus==1 首页
@@ -385,75 +407,161 @@ const mutations = {
     //pageStatus==7 自定义详情页
     if(state.pageStatus == 7){}
   },
-  //移动板块 (暂时停用)
+  //通过按钮移动板块 (暂时停用)
   moveModule(state, data) {
-    // Message.error('移动板块功能暂时停用！');
+    Message.error("该功能暂时禁用")
     // pageStatus == 1 首页
-    if (state.pageStatus == 1) {
-      const moveType = data.moveType;
-      const moduleId = data.i;
-      const modules = state.pageData.index;
-      // 查找模块在数组中的实际索引
-      const thisIndex = modules.findIndex(module => module.i === moduleId);
-      if (thisIndex === -1) {
-        Message.error('模块未找到！');
-        return;
+    // if (state.pageStatus == 1) {
+    //   const moveType = data.moveType;
+    //   const moduleId = data.i;
+    //   const modules = state.pageData.index;
+  
+    //   // 深拷贝 modules，避免直接操作原数据
+    //   const newModules = JSON.parse(JSON.stringify(modules));
+  
+    //   // 查找模块在数组中的实际索引
+    //   const thisIndex = newModules.findIndex(module => module.i === moduleId);
+    //   if (thisIndex === -1) {
+    //     Message.error('模块未找到！');
+    //     return;
+    //   }
+    //   const thisY = newModules[thisIndex].y;
+    //   let thatY;
+  
+    //   if (moveType === 'up') {
+    //     thatY = Math.max(
+    //       ...newModules.filter(item => item.y < thisY).map(item => item.y)
+    //     );
+    //     if (thatY === -Infinity) {
+    //       Message.error('已经是顶部了！');
+    //       return;
+    //     }
+    //     const thatIndex = newModules.findIndex(item => item.y === thatY);
+    //     if (thatIndex === -1) {
+    //       Message.error('上方模块未找到！');
+    //       return;
+    //     }
+    //     // 交换y值
+    //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
+  
+    //   } else if (moveType === 'down') {
+    //     thatY = Math.min(
+    //       ...newModules.filter(item => item.y > thisY).map(item => item.y)
+    //     );
+    //     if (thatY === Infinity) {
+    //       Message.error('已经是底部了！');
+    //       return;
+    //     }
+    //     const thatIndex = newModules.findIndex(item => item.y === thatY);
+    //     if (thatIndex === -1) {
+    //       Message.error('下方模块未找到！');
+    //       return;
+    //     }
+    //     // 交换y值
+    //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
+    //   } else {
+    //     Message.error('未知的移动类型！');
+    //     return;
+    //   }
+  
+    //   // 交换后对模块进行排序以确保顺序一致
+    //   newModules.sort((a, b) => a.y - b.y);
+      
+    //   // 使用 Vue.set 强制更新数组，确保视图更新
+    //   //Vue.set(state.pageData, 'index', newModules); // 这里更新整个数组
+    //   state.pageData.index = newModules;
+    //   //state.gridKey+=1;
+  
+    //   console.log(state.pageData.index); // 打印查看是否已修改
+    // }
+  
+    // // pageStatus == 2 分类页
+    // if (state.pageStatus == 2) {}
+    // // pageStatus == 3 列表页
+    // if (state.pageStatus == 3) {}
+    // // pageStatus == 4 详情页
+    // if (state.pageStatus == 4) {}
+    // // pageStatus == 5 搜索页
+    // if (state.pageStatus == 5) {}
+    // // pageStatus == 6 自定义列表页
+    // if (state.pageStatus == 6) {}
+    // // pageStatus == 7 自定义详情页
+    // if (state.pageStatus == 7) {}
+  },
+  //从外部拖拽板块
+  drag: function (state, data) {
+    let parentRect = document.getElementById('content').getBoundingClientRect();
+    //console.log(parentRect); 获取画布
+    let mouseInGrid = false;
+    if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+      mouseInGrid = true;
+    }
+    //state.gridlayoutObj
+    //如果没有占位符就创建一个
+    if (mouseInGrid === true && (state.pageData.index.findIndex(item => item.i === 'drop')) === -1) {
+      state.pageData.index.push({
+        x: (state.pageData.index.length * 2) % (this.colNum || 12),
+        y: state.pageData.index.length + (this.colNum || 12), // puts it at the bottom
+        w: 12,
+        h: 2,
+        i: 'drop',
+      });
+    }
+    //如果已经存在占位符
+    let index = state.pageData.index.findIndex(item => item.i === 'drop');
+    if (index !== -1) {
+      try {
+        state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "none";
+      } catch {
+
       }
-      const thisY = modules[thisIndex].y;
-      let thatY;
-      if (moveType === 'up') {
-        thatY = Math.max(
-          ...modules.filter(item => item.y < thisY).map(item => item.y)
-        );
-        if (thatY === -Infinity) {
-          Message.error('已经是顶部了！');
-          return;
-        }
-        const thatIndex = modules.findIndex(item => item.y === thatY);
-        if (thatIndex === -1) {
-          Message.error('上方模块未找到！');
-          return;
-        }
-        [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
+      let el = state.gridlayoutObj.$children[index];
+      el.dragging = {"top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left};
+      let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
 
-      } else if (moveType === 'down') {
-        thatY = Math.min(
-          ...modules.filter(item => item.y > thisY).map(item => item.y)
-        );
-        if (thatY === Infinity) {
-          Message.error('已经是底部了！');
-          return;
-        }
-        const thatIndex = modules.findIndex(item => item.y === thatY);
-        if (thatIndex === -1) {
-          Message.error('下方模块未找到！');
-          return;
-        }
-        [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
-      } else {
-        Message.error('未知的移动类型！');
-        return;
+      if (mouseInGrid === true) {
+        state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
+        state.DragPos.i = String(index);
+        state.DragPos.x = state.pageData.index[index].x;
+        state.DragPos.y = state.pageData.index[index].y;
+      }
+      if (mouseInGrid === false) {
+        state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
+        state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
       }
-      // 交换后对模块进行排序以确保顺序一致
-      modules.sort((a, b) => a.y - b.y);
-      // 使用 Vue.set 强制更新数组，确保视图更新
-      Vue.set(state.pageData, 'index', [...modules]);
-      console.log(state.pageData.index); //打印查看是否已修改
     }
-
-
-    // pageStatus == 2 分类页
-    if (state.pageStatus == 2) {}
-    // pageStatus == 3 列表页
-    if (state.pageStatus == 3) {}
-    // pageStatus == 4 详情页
-    if (state.pageStatus == 4) {}
-    // pageStatus == 5 搜索页
-    if (state.pageStatus == 5) {}
-    // pageStatus == 6 自定义列表页
-    if (state.pageStatus == 6) {}
-    // pageStatus == 7 自定义详情页
-    if (state.pageStatus == 7) {}
+  },
+  //拖拽结束 定位落点
+  dragend: function (state, data) {
+    //获取画布尺寸
+    let parentRect = document.getElementById('content').getBoundingClientRect();
+    //判断是否在画布内
+    let mouseInGrid = false;
+    if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true;
+    }
+    //如果在画布内，开始创建元素
+    if (mouseInGrid === true) {
+      alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
+      state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
+      state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+      
+      // UNCOMMENT below if you want to add a grid-item
+      /*
+      this.layout.push({
+          x: DragPos.x,
+          y: DragPos.y,
+          w: 1,
+          h: 1,
+          i: DragPos.i,
+      });
+      this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
+      try {
+          this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
+      } catch {
+      }
+      */
+    }
   },
   //修改首页板块高度
   setModuleHeight(state,data){

src/views/chat/creatTopic.vue

@@ -34,7 +34,7 @@
               </div>
             </el-form-item>
             <el-form-item label="建立群聊：" prop="is_group" class="custom-align-right">
-              <el-radio-group v-model="form.is_group" :disabled="groupStatus">
+              <el-radio-group v-model="form.is_group" :disabled="this.$route.query.id!=undefined">
                 <el-radio :label="'1'">是</el-radio>
                 <el-radio :label="'0'">否</el-radio>
               </el-radio-group>

src/views/template/page/pageIndex-copy.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="grid-layout-demo">
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>您选择的板块将展示到此区域</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
+      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
+        <div class="grid-item-content">
+          <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
+            <!-- 移动板块-->
+            <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
+            <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span>
+            <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
+          </div>
+          <!-- 4.广告模块 -->
+          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
+            <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 5.焦点图模块 -->
+          <div v-if="item.type == 'bannerSector'" class="moduleBox">
+            <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 6.多图模块 -->
+          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
+            <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 7.评论模块 -->
+          <div v-if="item.type == 'commentSector'" class="moduleBox">
+            <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 8.双联文章列表模块 -->
+          <div v-if="item.type == 'listSector'" class="moduleBox">
+            <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 9.纯图片组合模块 --> 
+          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
+            <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 10.友情链接模块 --> 
+          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
+            <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+        </div>
+      </grid-item>
+    </grid-layout>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+//引入vue-grid-layout拖拽效果
+import { GridLayout, GridItem } from 'vue-grid-layout';
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+import listSector from '../style/1/sector/8.vue';//文章列表
+import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
+import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
+import footerSector from '../style/1/sector/3.vue';//底部
+//自助建站组件 end------------------------------------------------------------>
+
+export default {
+  components: {
+    //拖拽组件
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 end------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //0.1上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.2下一步
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.模块操作 start ------------------------------------------------------------>
+    //1.1 移动模块
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
+    },
+    //1.2 删除模块
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
+    },
+    //1.3 打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+    //1.4 关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+    //1.模块操作 end ------------------------------------------------------------>
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+  //模块 start------------------------------------------------------------> 
+  .sectorBorder {
+    border: 2px dashed #eee;
+  }
+  .moduleBox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    justify-content: space-between;
+    box-sizing: border-box;
+    //border: 2px dashed #eee;
+  }
+  .moduleBoxBorder {
+    border: 2px dashed #eee;
+  }
+  //固定的模块
+  .FixedModuleBox {
+    width: 100%;
+    margin-bottom: 20px;
+    //border: 2px dashed #eee;
+  }
+  .FixedModuleBoxBottom {
+    width: 100%;
+  }
+  .FixedMainModuleBox {
+    width: 100%;
+    font-size: 18px;
+    color: #999;
+    text-align: center;
+    img {
+      margin-bottom: 20px;
+    }
+    padding: 100px;
+    //background: #F5F7FB;
+    margin-bottom: 20px;
+  }
+  .FixedMainModuleBoxBorder {
+    border: 2px dashed #eee;
+  }
+  //模块 end------------------------------------------------------------> 
+  //栅格布局 start------------------------------------------------------------> 
+  .grid-item-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    
+    .grid-tools-menu {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 99;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        width: 38px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        font-size: 30px;
+        cursor: pointer;
+        color: #999;
+        // display: flex;
+        // align-items: center;
+        // justify-content: center;
+        // cursor: pointer;
+        // margin: 5px;
+        // color: #000;
+        // background: #fff;
+        // border: 1px solid #000;
+        // border-radius: 5px;
+        // width: 24px;
+        // height: 24px;
+        // line-height: 24px;
+        // text-align: center;
+        // font-size: 14px;
+        // transition: all 0.3s;
+        // &:hover {
+        //   color: #fff;
+        //   background: #000;
+        // }
+        transition: all 0.3s;
+        &:hover {
+          color: #333;
+        }
+      }
+    }
+  }
+  .grid-layout {
+    grid-gap: 0;
+    row-gap: 0;
+  }
+  //栅格布局 end------------------------------------------------------------> 
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item > .el-form-item__label {
+    line-height: 140px !important;
+  }
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none; /* 禁止用户拖拽调整大小 */
+  }
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right; /* 设置标签文字右对齐 */
+  }
+  ::v-deep .shadowBox .el-button--mini.is-circle {
+    border-radius: 50% !important;
+  }
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>  
+

src/views/template/page/pageIndex-copy2.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="grid-layout-demo">
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>您选择的板块将展示到此区域</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
+      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
+        <div class="grid-item-content">
+          <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
+            <!-- 移动板块-->
+            <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
+            <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span>
+            <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
+          </div>
+          <!-- 4.广告模块 -->
+          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
+            <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 5.焦点图模块 -->
+          <div v-if="item.type == 'bannerSector'" class="moduleBox">
+            <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 6.多图模块 -->
+          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
+            <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 7.评论模块 -->
+          <div v-if="item.type == 'commentSector'" class="moduleBox">
+            <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 8.双联文章列表模块 -->
+          <div v-if="item.type == 'listSector'" class="moduleBox">
+            <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 9.纯图片组合模块 --> 
+          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
+            <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+          <!-- 10.友情链接模块 --> 
+          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
+            <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+          </div>
+        </div>
+      </grid-item>
+    </grid-layout>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+//引入vue-grid-layout拖拽效果
+import { GridLayout, GridItem } from 'vue-grid-layout';
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+import listSector from '../style/1/sector/8.vue';//文章列表
+import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
+import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
+import footerSector from '../style/1/sector/3.vue';//底部
+//自助建站组件 end------------------------------------------------------------>
+
+export default {
+  components: {
+    //拖拽组件
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 end------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //0.1上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.2下一步
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.模块操作 start ------------------------------------------------------------>
+    //1.1 移动模块
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
+    },
+    //1.2 删除模块
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
+    },
+    //1.3 打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+    //1.4 关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+    //1.模块操作 end ------------------------------------------------------------>
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+  //模块 start------------------------------------------------------------> 
+  .sectorBorder {
+    border: 2px dashed #eee;
+  }
+  .moduleBox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    justify-content: space-between;
+    box-sizing: border-box;
+    //border: 2px dashed #eee;
+  }
+  .moduleBoxBorder {
+    border: 2px dashed #eee;
+  }
+  //固定的模块
+  .FixedModuleBox {
+    width: 100%;
+    margin-bottom: 20px;
+    //border: 2px dashed #eee;
+  }
+  .FixedModuleBoxBottom {
+    width: 100%;
+  }
+  .FixedMainModuleBox {
+    width: 100%;
+    font-size: 18px;
+    color: #999;
+    text-align: center;
+    img {
+      margin-bottom: 20px;
+    }
+    padding: 100px;
+    //background: #F5F7FB;
+    margin-bottom: 20px;
+  }
+  .FixedMainModuleBoxBorder {
+    border: 2px dashed #eee;
+  }
+  //模块 end------------------------------------------------------------> 
+  //栅格布局 start------------------------------------------------------------> 
+  .grid-item-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    
+    .grid-tools-menu {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 99;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        width: 38px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        font-size: 30px;
+        cursor: pointer;
+        color: #999;
+        // display: flex;
+        // align-items: center;
+        // justify-content: center;
+        // cursor: pointer;
+        // margin: 5px;
+        // color: #000;
+        // background: #fff;
+        // border: 1px solid #000;
+        // border-radius: 5px;
+        // width: 24px;
+        // height: 24px;
+        // line-height: 24px;
+        // text-align: center;
+        // font-size: 14px;
+        // transition: all 0.3s;
+        // &:hover {
+        //   color: #fff;
+        //   background: #000;
+        // }
+        transition: all 0.3s;
+        &:hover {
+          color: #333;
+        }
+      }
+    }
+  }
+  .grid-layout {
+    grid-gap: 0;
+    row-gap: 0;
+  }
+  //栅格布局 end------------------------------------------------------------> 
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item > .el-form-item__label {
+    line-height: 140px !important;
+  }
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none; /* 禁止用户拖拽调整大小 */
+  }
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right; /* 设置标签文字右对齐 */
+  }
+  ::v-deep .shadowBox .el-button--mini.is-circle {
+    border-radius: 50% !important;
+  }
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>  
+

src/views/template/page/pageIndex.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid-layout-demo">
+  <div>
     <!-- 1.页头板块 -->
     <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
       <headSector />
@@ -8,51 +8,84 @@
     <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
       <menuSector />
     </div>
-    <!-- 占位符 -->
+
+
+    <div 
+      @drag="$store.commit('template/drag')" 
+      @dragend="$store.commit('template/dragend')" 
+      class="droppable-element" 
+      draggable="true" 
+      unselectable="on">
+        要拖拽的板块
+    </div>
+
+
+    <!-- 无内容占位符 -->
     <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
       <img src="@/assets/template/creat.png">
       <div>您选择的板块将展示到此区域</div>
     </div>
-    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true">
-      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
-        <div class="grid-item-content">
-          <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
-            <!-- 移动板块-->
-            <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
-            <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span>
-            <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
-          </div>
-          <!-- 4.广告模块 -->
-          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-            <imgTitleSector :dataSort="item.dataSort" :id="item.i"/>
-          </div>
-          <!-- 5.焦点图模块 -->
-          <div v-if="item.type == 'bannerSector'" class="moduleBox">
-            <bannerSector :dataSort="item.dataSort" :id="item.i"/>
-          </div>
-          <!-- 6.多图模块 -->
-          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-            <manyPictureSector :dataSort="item.dataSort" :id="item.i"/>
-          </div>
-          <!-- 7.评论模块 -->
-          <div v-if="item.type == 'commentSector'" class="moduleBox">
-            <commentSector :dataSort="item.dataSort" :id="item.i" />
-          </div>
-          <!-- 8.双联文章列表模块 -->
-          <div v-if="item.type == 'listSector'" class="moduleBox">
-            <listSector :dataSort="item.dataSort" :id="item.i"/>
-          </div>
-          <!-- 9.纯图片组合模块 --> 
-          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-            <onlyImgSector :dataSort="item.dataSort" :id="item.i"/>
-          </div>
-          <!-- 10.友情链接模块 --> 
-          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
-            <friendShipLinkSector :dataSort="item.dataSort" :id="item.i"/>
+    <!--使用gridKey来强制更新视图-->
+    <div id="content">
+      <grid-layout 
+        ref="gridlayout"
+        :layout="this.$store.state.template.pageData.index" 
+        :layout.sync="this.$store.state.template.pageData.index"
+        :col-num="12" 
+        :row-height="rowHeight" 
+        :margin="[0,0]" 
+        :is-draggable="true" 
+        :is-resizable="true" 
+        :key="this.$store.state.template.gridKey
+        ">
+        <grid-item 
+          v-for="(item, index) in this.$store.state.template.pageData.index" 
+          :key="item.i" 
+          :i="item.i" 
+          :x="item.x" 
+          :y="item.y" 
+          :w="item.w" 
+          :h="item.h" 
+          :is-resizable="false">
+          <div class="grid-item-content">
+            <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
+              <!-- 移动板块-->
+              <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
+              <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span>
+              <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
+            </div>
+            <!-- 4.广告模块 -->
+            <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
+              <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 5.焦点图模块 -->
+            <div v-if="item.type == 'bannerSector'" class="moduleBox">
+              <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 6.多图模块 -->
+            <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
+              <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 7.评论模块 -->
+            <div v-if="item.type == 'commentSector'" class="moduleBox">
+              <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 8.双联文章列表模块 -->
+            <div v-if="item.type == 'listSector'" class="moduleBox">
+              <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 9.纯图片组合模块 --> 
+            <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
+              <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 10.友情链接模块 --> 
+            <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
+              <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
           </div>
-        </div>
-      </grid-item>
-    </grid-layout>
+        </grid-item>
+      </grid-layout>
+    </div>
     <div class="FixedModuleBoxBottom">
       <!-- 3.页尾模块 -->
       <footerSector />
@@ -64,8 +97,7 @@
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
-//引入vue-grid-layout拖拽效果
-import { GridLayout, GridItem } from 'vue-grid-layout';
+import {GridLayout, GridItem} from "vue-grid-layout";
 //页面公用组件 end------------------------------------------------------------>
 
 //自助建站组件 start------------------------------------------------------------>
@@ -82,9 +114,9 @@ import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
 import footerSector from '../style/1/sector/3.vue';//底部
 //自助建站组件 end------------------------------------------------------------>
 
+
 export default {
   components: {
-    //拖拽组件
     GridLayout,
     GridItem,
     //板块组件 style1
@@ -111,167 +143,146 @@ export default {
       //1.编辑模块 end------------------------------------------------------------>
     }
   },
-  methods: {
-    //0.全局操作 start ------------------------------------------------------------>
-    //0.1上一步  
-    goStyle(){
-      this.$router.push({
-        path: '/templateStyle',
-        query: {
-          id: this.editId
-        }
-      });
-    },
-    //0.2下一步
-    gotoList(){
-      this.$router.push({
-        path: '/templateList'
-      });
-    },
-    //0.全局操作 end ------------------------------------------------------------>
-
-    //1.模块操作 start ------------------------------------------------------------>
-    //1.1 移动模块
-    moveModule(i,moveType){
-      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
-    },
-    //1.2 删除模块
-    deleteModule(i,dataSort){
-      let data = {
-        i:i,
-        dataSort:dataSort
-      }
-      this.$store.commit('template/deleteModule',data);
-    },
-    //1.3 打开弹出框
-    openWindow(item) {
-      this.editModule = item.i;
-      this.windowStatus = true;
-    },
-    //1.4 关闭弹出框
-    closeWindow() {
-      this.windowStatus = false;
-    }
-    //1.模块操作 end ------------------------------------------------------------>
+  mounted() {
+    //必备操作
+    //1.获得vuex中的鼠标对象
+    let mouseObj = this.$store.state.template.mouseXY;
+    //2.获得gridlayout对象
+    this.$store.commit('template/setGridlayoutObj',this.$refs.gridlayout);
+    //3.监听鼠标按住以后的移动事件
+    document.addEventListener("dragover", function (e,store) {
+      mouseObj.x = e.clientX;
+      mouseObj.y = e.clientY;
+      // mouseXY.x = e.clientX;
+      // mouseXY.y = e.clientY;
+    },false);
   },
-  mounted(){
+  methods: {
 
   }
 }
 </script>
 
 <style scoped lang="less">
-  //模块 start------------------------------------------------------------> 
-  .sectorBorder {
-    border: 2px dashed #eee;
-  }
-  .moduleBox {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    justify-content: space-between;
-    box-sizing: border-box;
-    //border: 2px dashed #eee;
-  }
-  .moduleBoxBorder {
-    border: 2px dashed #eee;
-  }
-  //固定的模块
-  .FixedModuleBox {
-    width: 100%;
-    margin-bottom: 20px;
-    //border: 2px dashed #eee;
-  }
-  .FixedModuleBoxBottom {
-    width: 100%;
-  }
-  .FixedMainModuleBox {
-    width: 100%;
-    font-size: 18px;
-    color: #999;
-    text-align: center;
-    img {
-      margin-bottom: 20px;
-    }
-    padding: 100px;
-    //background: #F5F7FB;
+//拖拽demo
+.droppable-element {
+  width: 150px;
+  text-align: center;
+  background: #fdd;
+  border: 1px solid black;
+  margin: 10px 0;
+  padding: 10px;
+}
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+  border: 2px dashed #eee;
+}
+.moduleBox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  justify-content: space-between;
+  box-sizing: border-box;
+  //border: 2px dashed #eee;
+}
+.moduleBoxBorder {
+  border: 2px dashed #eee;
+}
+//固定的模块
+.FixedModuleBox {
+  width: 100%;
+  margin-bottom: 20px;
+  //border: 2px dashed #eee;
+}
+.FixedModuleBoxBottom {
+  width: 100%;
+}
+.FixedMainModuleBox {
+  width: 100%;
+  font-size: 18px;
+  color: #999;
+  text-align: center;
+  img {
     margin-bottom: 20px;
   }
-  .FixedMainModuleBoxBorder {
-    border: 2px dashed #eee;
-  }
-  //模块 end------------------------------------------------------------> 
-  //栅格布局 start------------------------------------------------------------> 
-  .grid-item-content {
+  padding: 100px;
+  //background: #F5F7FB;
+  margin-bottom: 20px;
+}
+.FixedMainModuleBoxBorder {
+  border: 2px dashed #eee;
+}
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+.grid-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  
+  .grid-tools-menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #fff;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    
-    .grid-tools-menu {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 99;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      span {
-        width: 38px;
-        height: 38px;
-        line-height: 38px;
-        text-align: center;
-        font-size: 30px;
-        cursor: pointer;
-        color: #999;
-        // display: flex;
-        // align-items: center;
-        // justify-content: center;
-        // cursor: pointer;
-        // margin: 5px;
-        // color: #000;
-        // background: #fff;
-        // border: 1px solid #000;
-        // border-radius: 5px;
-        // width: 24px;
-        // height: 24px;
-        // line-height: 24px;
-        // text-align: center;
-        // font-size: 14px;
-        // transition: all 0.3s;
-        // &:hover {
-        //   color: #fff;
-        //   background: #000;
-        // }
-        transition: all 0.3s;
-        &:hover {
-          color: #333;
-        }
+    span {
+      width: 38px;
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      font-size: 30px;
+      cursor: pointer;
+      color: #999;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      // cursor: pointer;
+      // margin: 5px;
+      // color: #000;
+      // background: #fff;
+      // border: 1px solid #000;
+      // border-radius: 5px;
+      // width: 24px;
+      // height: 24px;
+      // line-height: 24px;
+      // text-align: center;
+      // font-size: 14px;
+      // transition: all 0.3s;
+      // &:hover {
+      //   color: #fff;
+      //   background: #000;
+      // }
+      transition: all 0.3s;
+      &:hover {
+        color: #333;
       }
     }
   }
-  .grid-layout {
-    grid-gap: 0;
-    row-gap: 0;
-  }
-  //栅格布局 end------------------------------------------------------------> 
-  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-  ::v-deep .custom-form-item > .el-form-item__label {
-    line-height: 140px !important;
-  }
-  ::v-deep .custom-textarea .el-textarea__inner {
-    resize: none; /* 禁止用户拖拽调整大小 */
-  }
-  ::v-deep .custom-align-right .el-form-item__label {
-    text-align: right; /* 设置标签文字右对齐 */
-  }
-  ::v-deep .shadowBox .el-button--mini.is-circle {
-    border-radius: 50% !important;
-  }
-  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>  
-
+}
+.grid-layout {
+  grid-gap: 0;
+  row-gap: 0;
+}
+//栅格布局 end------------------------------------------------------------> 
+//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用户拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
+::v-deep .shadowBox .el-button--mini.is-circle {
+  border-radius: 50% !important;
+}
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/public/editBtn.vue

@@ -26,6 +26,10 @@ export default {
     size:{
       type:Number,
       default:0
+    },
+    y: {
+      type:Number,
+      default:0
     }
   },
   data() {
@@ -40,7 +44,8 @@ export default {
         dataSort:this.dataSort,
         sort:this.sort,
         type:this.type,
-        size:this.size
+        size:this.size,
+        y:this.y
       }
       console.log(data);
       //小助手

src/views/template/public/editWindow.vue

@@ -26,6 +26,10 @@
             <div>当前组件在此板块中的位置:</div>
             <div>{{this.$store.state.template.editComponentSort}}</div>
           </div>
+          <div class="testAssistantContentItem">
+            <div>当前组件在此画布中的位置:</div>
+            <div>{{this.$store.state.template.editSectorY}}</div>
+          </div>
           <div class="testAssistantContentItem">
             <div>当前板块在Json数据中的位置:</div>
             <div>{{this.$store.state.template.editDataSort}}</div>

src/views/template/style/1/sector/10.vue

@@ -1,14 +1,14 @@
 <template>
   <div :class="['friendShipLinkSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['friendShipLinkSectorTitle', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
       <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <title1Style />
       </div>
     </div>
     <div :class="['friendShipLinkSectorItemBox', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="4" :size="1"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="4" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="9"/>
       <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
         <link1Style />
@@ -38,6 +38,10 @@ export default {
       type:Number,
       default:0
     },
+    y:{
+      type:Number,
+      default:0
+    },
     dataSort:{
       type:Number,
       default:0

src/views/template/style/1/sector/4.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['imgTitleSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div class="imgSectorBox">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="3" :size="1"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="3" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="3"/>
       <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <useStyle1 />
@@ -41,6 +41,10 @@ export default {
       type:Number,
       default:0
     },
+    y:{
+      type:Number,
+      default:0
+    },
     dataSort:{
       type:Number,
       default:0

src/views/template/style/1/sector/5.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['bannerBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['itemTopBox', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="1"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1"/>
       <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <mainTitleStyle1 />
@@ -12,7 +12,7 @@
     </div>
     <div class="itemBottomBox">
       <div class="bannerLayerBox">
-        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="3"/>
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="3" :y="y"/>
         <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="4"/>
         <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
           <banner1Style />
@@ -22,7 +22,7 @@
         </div>
       </div>
       <div :class="['NewsListBox', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort"  :sort="2" :type="2" :size="5"/>
+        <editBtn :id="id" :dataSort="dataSort"  :sort="2" :type="2" :size="5" :y="y"/>
         <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="5"/>
         <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
           <tabs1Style />
@@ -68,6 +68,10 @@ export default {
       type:Number,
       default:0
     },
+    y:{
+      type:Number,
+      default:0
+    },
     dataSort:{
       type:Number,
       default:0

src/views/template/style/1/sector/6.vue

@@ -1,14 +1,14 @@
 <template>
   <div :class="['manyPictureSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['manyPictureSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
       <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <title1Style />
       </div>
     </div>
     <div class="manyPictureImgBox">
-      <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="6" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="7"/>
       <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
         <staticHtml1Style />
@@ -16,7 +16,7 @@
     </div>
     <div class="manyPictureNewsBox">
       <div :class="['manyPictureNewsItem', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5"/>
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5" :y="y"/>
         <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="6"/>
         <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
           <list1Style />
@@ -29,7 +29,7 @@
         </div>
       </div>
       <div :class="['manyPictureNewsItem', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort" :sort="3" :type="1" :size="5"/>
+        <editBtn :id="id" :dataSort="dataSort" :sort="3" :type="1" :size="5" :y="y"/>
         <convertBtn :id="id" :dataSort="dataSort" :sort="3" :type="6"/>
         <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[3].component_style == 1">
           <list1Style />
@@ -74,6 +74,10 @@ export default {
       type:Number,
       default:0
     },
+    y:{
+      type:Number,
+      default:0
+    },
     dataSort:{
       type:Number,
       default:0

src/views/template/style/1/sector/7.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['commentSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['commentSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
       <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <title1Style />
@@ -9,7 +9,7 @@
     </div>
     <div class="commentSectorBoxContent">
       <div :class="['tabsCalendarNewsBox', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5"/>
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5" :y="y"/>
         <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="5"/>
         <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
           <tabs1Style />
@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="calendarBox">
-        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="8" :size="1"/>
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="8" :size="1" :y="y"/>
         <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="8"/>
         <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
           <form1Style />
@@ -55,6 +55,10 @@ export default {
       type: Number,
       default: 0
     },
+    y:{
+      type:Number,
+      default:0
+    },
     dataSort:{
       type:Number,
       default:0

src/views/template/style/1/sector/8.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['listSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['listSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
       <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <title1Style />
@@ -9,7 +9,7 @@
     </div>
     <div class="listSectorBoxContent">
       <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5"/>
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5" :y="y"/>
         <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
         <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
           <list1Style />
@@ -22,7 +22,7 @@
         </div>
       </div>
       <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5"/>
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5" :y="y"/>
         <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="6"/>
         <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
           <list1Style />
@@ -65,6 +65,10 @@ export default {
       type:Number,
       default:0
     },
+    y:{
+      type:Number,
+      default:0
+    },
     dataSort:{
       type:Number,
       default:0

src/views/template/style/1/sector/9.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['onlyImgSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div class="onlyImgSectorPositionBox">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="6" :size="1"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="6" :size="1" :y="y"/>
       <!-- <convertBtn :id="id" :sort="0" :type="3"/> -->
       <staticHtml2Style />
     </div>
@@ -24,6 +24,10 @@ export default {
       type:Number,
       default:0
     },
+    y:{
+      type:Number,
+      default:0
+    },
     dataSort:{
       type:Number,
       default:0