{"version":3,"sources":["webpack:///./src/views/test/index.vue?adbd","webpack:///./src/views/test/index.vue?e120","webpack:///src/views/test/index.vue","webpack:///./src/views/test/index.vue?a9c3","webpack:///./src/views/test/index.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","ref","style","top","positionY","left","positionX","gridArea","on","move","_v","_s","staticRenderFns","component"],"mappings":"gHAAA,W,gECAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,aAAa,CAACF,EAAG,aAAa,CAACA,EAAG,MAAM,CAACG,IAAI,QAAQD,YAAY,iBAAiBE,MAAM,CAAEC,IAAIR,KAAKS,UAAUC,KAAKV,KAAKW,UAAUC,SAAS,SAAUC,GAAG,CAAC,UAAYd,EAAIe,OAAO,CAACf,EAAIgB,GAAG,IAAIhB,EAAIiB,GAAGjB,EAAIY,WAAW,IAAIZ,EAAIiB,GAAGjB,EAAIU,WAAW,UAAU,IACvWQ,EAAkB,GCYtB,GACE,KAAF,OACE,KAFF,WAGI,MAAJ,CACM,UAAN,EACM,UAAN,IAGE,QAAF,CACI,KADJ,SACA,GAAM,IAAN,OACM,QAAN,YACM,IAAN,WACA,YAQA,YACA,YACM,SAAN,wBAEQ,IAAR,cACA,cACQ,EAAR,qBAgBM,SAAN,sBAGA,sDAEU,EAAV,uBACA,iFACU,EAAV,uBACA,sDACU,EAAV,yBACA,kFACU,EAAV,uBACA,sDACU,EAAV,uBACA,iFACU,EAAV,uBACA,sDACU,EAAV,yBACA,kFACU,EAAV,yBAEU,EAAV,uBAEQ,SAAR,iBACQ,SAAR,iBAGQ,EAAR,kCAEA,uBACU,EAAV,6BACA,OAGI,aApEJ,SAoEA,OAWM,EAAN,kBACM,EAAN,iBACM,KAAN,YACM,KAAN,aAEI,aApFJ,SAoFA,OACA,OACQ,EAAR,IACA,UACQ,GAAR,KAEA,OACQ,EAAR,IACA,OACQ,EAAR,GAEM,EAAN,kBACM,EAAN,iBAEM,KAAN,YACM,KAAN,aAEI,aArGJ,SAqGA,OACA,KACQ,EAAR,EACA,UACQ,GAAR,KAEA,OACQ,EAAR,IACA,OACQ,EAAR,GAEM,EAAN,kBACM,EAAN,iBAEM,KAAN,YACM,KAAN,aAEI,YAtHJ,SAsHA,KACM,KAAN,YACM,KAAN,YACM,EAAN,oBC9I8V,I,wBCQ1VC,EAAY,eACd,EACApB,EACAmB,GACA,EACA,KACA,WACA,MAIa,aAAAC,E","file":"js/chunk-ae3c64b2.d5389e3d.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&id=f8ed0138&scoped=true&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container\"},[_c('transition',[_c('div',{ref:\"block\",staticClass:\"block animated\",style:({top:this.positionY,left:this.positionX,gridArea:'main2'}),on:{\"mousedown\":_vm.move}},[_vm._v(\" \"+_vm._s(_vm.positionX)+\" \"+_vm._s(_vm.positionY)+\" \")])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"container\">\n    <transition>\n      <div class=\"block animated\" :style=\"{top:this.positionY,left:this.positionX,gridArea:'main2'}\" @mousedown=\"move\"\n           ref=\"block\">\n        {{positionX}}\n        {{positionY}}\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'test',\n    data() {\n      return {\n        positionX: 0, // 定义方块的两个坐标\n        positionY: 0\n      }\n    },\n    methods: {\n      move(e) {\n        console.log(e, '11')\n        const oDiv = e.target; // 获取点击的目标元素\n        const gDiv = e.path[1]; // 获取点击元素的父级元素\n\n        /* 获取点击时的偏移位置，在这里要注意一下\n        **由于我们用的是网格布局,每在一个格子中相对位置都是相对格子来算的，不是相对于父级盒子左上角\n        **也就是说当你把方块移动到九个格子中任意一个时，方块的位置都是top：0和left：0\n        */\n\n        // 所以这里我们直接取鼠标点击的位置减去点击盒子的偏移位置，也就是0\n        const disX = e.clientX;\n        const disY = e.clientY;\n        document.onmousemove = (e) => {\n          // 当拖动时，算出的值就刚好是方块的top和left值\n          const left = e.clientX - disX;\n          const top = e.clientY - disY;\n          this.rangeOfHead1(left, top, oDiv)\n          // switch (oDiv.style.gridArea) {\n          //   case 'head1 / head1 / head1 / head1':\n          //     this.rangeOfHead1(left, top, oDiv);\n          //     break; // 实现head1的移动范围\n          //   case 'head2 / head2 / head2 / head2':\n          //     this.rangeOfHead2(left, top, oDiv);\n          //     break; // 实现head2的移动范围\n          //   case 'head3 / head3 / head3 / head3':\n          //     this.rangeOfHead3(left, top, oDiv);\n          //     break; // 实现head3的移动范围\n          //   case 'main1 / main1 / main1 / main1':\n          //     this.rangeOfMain1(left, top, oDiv);\n          //     break; // 实现main1的移动范围\n          // }\n        };\n        document.onmouseup = (e) => {\n          // 当鼠标抬起时，我们要做的事\n          // 通过点击位置和父级元素的偏移判断方块在哪个区域\n          if (e.clientY - gDiv.offsetTop < 100 && e.clientX - gDiv.offsetLeft < 100) {\n            // 将方块移动到该区域中\n            this.changeBlock('head1', oDiv);\n          } else if (e.clientY - gDiv.offsetTop > 100 && e.clientX - gDiv.offsetLeft < 100 && e.clientY - gDiv.offsetTop < 200) {\n            this.changeBlock('main1', oDiv);\n          } else if (e.clientY - gDiv.offsetTop > 200 && e.clientX - gDiv.offsetLeft < 100) {\n            this.changeBlock('footer1', oDiv);\n          } else if (e.clientY - gDiv.offsetTop < 100 && e.clientX - gDiv.offsetLeft > 100 && e.clientX - gDiv.offsetLeft < 200) {\n            this.changeBlock('head2', oDiv);\n          } else if (e.clientY - gDiv.offsetTop < 100 && e.clientX - gDiv.offsetLeft > 200) {\n            this.changeBlock('head3', oDiv);\n          } else if (e.clientY - gDiv.offsetTop > 100 && e.clientX - gDiv.offsetLeft > 200 && e.clientY - gDiv.offsetTop < 200) {\n            this.changeBlock('main3', oDiv);\n          } else if (e.clientY - gDiv.offsetTop > 200 && e.clientX - gDiv.offsetLeft > 200) {\n            this.changeBlock('footer3', oDiv);\n          } else if (e.clientY - gDiv.offsetTop > 200 && e.clientX - gDiv.offsetLeft > 100 && e.clientX - gDiv.offsetLeft < 200) {\n            this.changeBlock('footer2', oDiv);\n          } else {\n            this.changeBlock('main2', oDiv);\n          }\n          document.onmousemove = null; // 需要把事件监听取消\n          document.onmousedown = null; // 需要把事件监听取消\n\n          // 当然，不能忘记我们的动画hhh\n          oDiv.className = 'block animated wobble';\n          // eslint-disable-next-line no-unused-vars\n          const removeClass = setTimeout(() => {\n            oDiv.className = 'block animated';\n          }, 500);\n        };\n      },\n      rangeOfHead1(x, y, oDiv) { // 判断head1格子中的可以移动范围\n        // if (x >= 200) {\n        //   x = 200;\n        // } else if (x <= 0) {\n        //   x = 0;\n        // }\n        // if (y >= 200) {\n        //   y = 200;\n        // } else if (y <= 0) {\n        //   y = 0;\n        // }\n        oDiv.style.left = x + 'px';\n        oDiv.style.top = y + 'px';\n        this.positionX = x;\n        this.positionY = y;\n      },\n      rangeOfHead2(x, y, oDiv) { // 判断head2格子中的可以移动范围\n        if (x >= 100) {\n          x = 100;\n        } else if (x <= -100) {\n          x = -100;\n        }\n        if (y >= 200) {\n          y = 200;\n        } else if (y <= 0) {\n          y = 0;\n        }\n        oDiv.style.left = x + 'px';\n        oDiv.style.top = y + 'px';\n\n        this.positionX = x;\n        this.positionY = y;\n      },\n      rangeOfHead3(x, y, oDiv) { // 判断head3格子中的可以移动范围\n        if (x >= 0) {\n          x = 0;\n        } else if (x <= -200) {\n          x = -200;\n        }\n        if (y >= 200) {\n          y = 200;\n        } else if (y <= 0) {\n          y = 0;\n        }\n        oDiv.style.left = x + 'px';\n        oDiv.style.top = y + 'px';\n\n        this.positionX = x;\n        this.positionY = y;\n      },\n      changeBlock(blockName, oDiv) { // 将方块移入到对应的区域中\n        this.positionX = 0;\n        this.positionY = 0;\n        oDiv.style.gridArea = blockName;\n      }\n    }\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  .container {\n    position: relative; /*实现定位，使得滑块定位相对于此*/\n    display: grid; /*定义网格布局*/\n    width: 300px;\n    height: 300px;\n    grid-template-columns: 100px 100px 100px; /*实现九宫格，行列各三*/\n    grid-template-rows: 100px 100px 100px;\n    grid-template-areas: \"head1 head2 head3\" /*定义个格子的名称，方便计算*/\n    \"main1 main2 main3\" \"footer1 footer2 footer3\";\n    border: 1px solid #000;\n    margin: 0 auto;\n  }\n\n  .block {\n    position: absolute; /*相对于container定位*/\n    width: 100px;\n    height: 100px;\n    display: flex; /*flex布局，使得文字在中央*/\n    justify-content: center;\n    justify-items: center;\n    align-items: center;\n    align-content: center;\n    user-select: none; /*用户不可选定文字*/\n    background: olivedrab;\n    border: 1px solid #000\n  }\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=f8ed0138&scoped=true&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=f8ed0138&scoped=true&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"f8ed0138\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}