{"version":3,"sources":["webpack:///./src/views/Playground/test.vue?78b3","webpack:///./node_modules/core-js/modules/es.regexp.flags.js","webpack:///./src/views/Playground/test.vue?babd","webpack:///src/views/Playground/test.vue","webpack:///./src/views/Playground/test.vue?a329","webpack:///./src/views/Playground/test.vue","webpack:///./src/assets/images/avator-img.png"],"names":["DESCRIPTORS","objectDefinePropertyModule","regExpFlags","fails","FORCED","Object","getOwnPropertyDescriptor","RegExp","prototype","get","call","dotAll","sticky","f","configurable","render","_vm","this","_h","$createElement","_c","_self","staticClass","style","attrs","on","$event","down","move","end","e","loadImg","staticRenderFns","name","data","giftStyle","rate","flags","position","x","y","nx","ny","dx","dy","xPum","yPum","screenW","screenH","divW","divH","methods","winW","winH","el","target","height","width","left","top","touch","event","touches","clientX","clientY","moveImg","offsetLeft","offsetTop","document","addEventListener","console","log","component","module","exports"],"mappings":"gHAAA,W,wBCAA,IAAIA,EAAc,EAAQ,QACtBC,EAA6B,EAAQ,QACrCC,EAAc,EAAQ,QACtBC,EAAQ,EAAQ,QAEhBC,EAASJ,GAAeG,GAAM,WAEhC,MAA+G,OAAxGE,OAAOC,yBAAyBC,OAAOC,UAAW,SAASC,IAAIC,KAAK,CAAEC,QAAQ,EAAMC,QAAQ,OAKjGR,GAAQH,EAA2BY,EAAEN,OAAOC,UAAW,QAAS,CAClEM,cAAc,EACdL,IAAKP,K,yCCdP,IAAIa,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,aAAa,CAACF,EAAG,MAAM,CAACE,YAAY,MAAMC,MAAOP,EAAa,UAAEQ,MAAM,CAAC,GAAK,UAAU,IAAM,EAAQ,QAAkC,IAAM,IAAIC,GAAG,CAAC,WAAa,SAASC,GAAQ,OAAOV,EAAIW,QAAQ,UAAY,SAASD,GAAQ,OAAOV,EAAIY,QAAQ,SAAW,SAASF,GAAQ,OAAOV,EAAIa,OAAO,KAAO,SAAUC,GAAI,OAAOd,EAAIe,QAAQD,UAC7bE,EAAkB,GCgBtB,G,WAAA,CACEC,KAAM,OACNC,KAFF,WAGI,MAAO,CACLC,UAAW,GACXC,KAAM,mBACNC,OAAO,EACPC,SAAU,CACRC,EAAG,EACHC,EAAG,GAELC,GAAI,GACJC,GAAI,GACJC,GAAI,GACJC,GAAI,GACJC,KAAM,GACNC,KAAM,GACNC,QAAS,EACTC,QAAS,EACTC,KAAM,EACNC,KAAM,IAGVC,QAAS,CACPpB,QADJ,SACA,GACM,IAAN,uCACA,wCACMd,KAAK8B,QAAUK,EACfnC,KAAK+B,QAAUK,EACfpC,KAAKgC,KAAOK,EAAGC,OAAOC,OAASvC,KAAKmB,KACpCnB,KAAKiC,KAAOI,EAAGC,OAAOE,MAAQxC,KAAKmB,KACnCnB,KAAKkB,UAAY,CACf,UAAW,IACXG,SAAU,WACVoB,KAAM,GAAd,4CACQC,IAAK,GAAb,6CACQH,OAAQ,GAAhB,uCACQC,MAAO,GAAf,wCAGI9B,KAjBJ,WAmBM,IAAIiC,EADJ3C,KAAKoB,OAAQ,EAGXuB,EADEC,MAAMC,QACAD,MAAMC,QAAQ,GAEdD,MAEV5C,KAAKqB,SAASC,EAAIqB,EAAMG,QACxB9C,KAAKqB,SAASE,EAAIoB,EAAMI,QAExB,IAAN,qCACM/C,KAAK0B,GAAKsB,EAAQC,WAClBjD,KAAK2B,GAAKqB,EAAQE,WAIpBvC,KAlCJ,WAmCM,GAAIX,KAAKoB,MAAO,CACd,IAAIuB,EAEFA,EADEC,MAAMC,QACAD,MAAMC,QAAQ,GAEdD,MAEV5C,KAAKwB,GAAKmB,EAAMG,QAAU9C,KAAKqB,SAASC,EACxCtB,KAAKyB,GAAKkB,EAAMI,QAAU/C,KAAKqB,SAASE,EAExCvB,KAAK4B,KAAO5B,KAAK0B,GAAK1B,KAAKwB,GAC3BxB,KAAK6B,KAAO7B,KAAK2B,GAAK3B,KAAKyB,GACvBzB,KAAK4B,KAAO,IACd5B,KAAK4B,KAAO,GAEV5B,KAAK4B,KAAO5B,KAAK8B,QAAU9B,KAAKgC,OAClChC,KAAK4B,KAAO5B,KAAK8B,QAAU9B,KAAKgC,MAE9BhC,KAAK6B,KAAO,IACd7B,KAAK6B,KAAO,GAEV7B,KAAK6B,KAAO7B,KAAK+B,QAAU/B,KAAKiC,OAClCjC,KAAK6B,KAAO7B,KAAK+B,QAAU/B,KAAKiC,MAGlC,IAAR,qCACQe,EAAQ1C,MAAMmC,KAAOzC,KAAK4B,KAAO,KACjCoB,EAAQ1C,MAAMoC,IAAM1C,KAAK6B,KAAO,KAEhCsB,SAASC,iBACjB,aACA,WAEU,MAAV,qBAEA,KAKIxC,IA3EJ,WA4EMZ,KAAKoB,OAAQ,EACbiC,QAAQC,IAAItD,KAAK4B,KAAO5B,KAAKmB,KAAMnB,KAAK6B,KAAO7B,KAAKmB,KAAM,4BCrH6R,I,wBCQzVoC,EAAY,eACd,EACAzD,EACAiB,GACA,EACA,KACA,WACA,MAIa,aAAAwC,E,8BCnBfC,EAAOC,QAAU,IAA0B,+B","file":"js/chunk-793d6f44.500e7a52.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!./test.vue?vue&type=style&index=0&id=66b384df&lang=scss&scoped=true&\"","var DESCRIPTORS = require('../internals/descriptors');\nvar objectDefinePropertyModule = require('../internals/object-define-property');\nvar regExpFlags = require('../internals/regexp-flags');\nvar fails = require('../internals/fails');\n\nvar FORCED = DESCRIPTORS && fails(function () {\n  // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe\n  return Object.getOwnPropertyDescriptor(RegExp.prototype, 'flags').get.call({ dotAll: true, sticky: true }) !== 'sy';\n});\n\n// `RegExp.prototype.flags` getter\n// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags\nif (FORCED) objectDefinePropertyModule.f(RegExp.prototype, 'flags', {\n  configurable: true,\n  get: regExpFlags\n});\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container\"},[_c('img',{staticClass:\"img\",style:(_vm.giftStyle),attrs:{\"id\":\"moveImg\",\"src\":require(\"@/assets/images/avator-img.png\"),\"alt\":\"\"},on:{\"touchstart\":function($event){return _vm.down()},\"touchmove\":function($event){return _vm.move()},\"touchend\":function($event){return _vm.end()},\"load\":function (e){ return _vm.loadImg(e); }}})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"container\">\r\n    <img\r\n      id=\"moveImg\"\r\n      class=\"img\"\r\n      src=\"@/assets/images/avator-img.png\"\r\n      :style=\"giftStyle\"\r\n      alt\r\n      @touchstart=\"down()\"\r\n      @touchmove=\"move()\"\r\n      @touchend=\"end()\"\r\n      @load=\"e=>loadImg(e)\"\r\n    >\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'Test',\r\n  data() {\r\n    return {\r\n      giftStyle: {},\r\n      rate: 0.34739583333333335,\r\n      flags: false,\r\n      position: {\r\n        x: 0, // 手指按下去是的点的x坐标\r\n        y: 0 // 手指按下去时的点的y坐标\r\n      },\r\n      nx: '', // 拖拽的x坐标距离\r\n      ny: '', // 拖拽的y坐标距离\r\n      dx: '', // moveImg距离左边界的offsetLeft\r\n      dy: '', // moveImg距离上边界的offsetTop\r\n      xPum: '', // 手指拖拽物体移动的新x坐标\r\n      yPum: '', // 手指拖拽物体移动的新y坐标\r\n      screenW: 0,\r\n      screenH: 0,\r\n      divW: 0,\r\n      divH: 0\r\n    }\r\n  },\r\n  methods: {\r\n    loadImg(el) {\r\n      const winW = document.documentElement.clientWidth\r\n      const winH = document.documentElement.clientHeight\r\n      this.screenW = winW\r\n      this.screenH = winH\r\n      this.divW = el.target.height * this.rate\r\n      this.divH = el.target.width * this.rate\r\n      this.giftStyle = {\r\n        'z-index': 300,\r\n        position: 'absolute',\r\n        left: `${winW / 2 - (el.target.width * this.rate) / 2}px`,\r\n        top: `${winH / 2 - (el.target.height * this.rate) / 2}px`,\r\n        height: `${el.target.height * this.rate}px`,\r\n        width: `${el.target.width * this.rate}px`\r\n      }\r\n    },\r\n    down() {\r\n      this.flags = true\r\n      var touch\r\n      if (event.touches) {\r\n        touch = event.touches[0]\r\n      } else {\r\n        touch = event\r\n      }\r\n      this.position.x = touch.clientX\r\n      this.position.y = touch.clientY\r\n      // console.log(this.position.x , this.position.y, 'this.position.x, this.position.y')\r\n      const moveImg = document.getElementById('moveImg')\r\n      this.dx = moveImg.offsetLeft\r\n      this.dy = moveImg.offsetTop\r\n      // console.log(moveImg, 'moveImg')\r\n      // console.log(this.dx , this.dy, 'this.dx, this.dy')\r\n    },\r\n    move() {\r\n      if (this.flags) {\r\n        var touch\r\n        if (event.touches) {\r\n          touch = event.touches[0]\r\n        } else {\r\n          touch = event\r\n        }\r\n        this.nx = touch.clientX - this.position.x\r\n        this.ny = touch.clientY - this.position.y\r\n        // console.log(this.nx , this.ny, 'this.nx, this.ny')\r\n        this.xPum = this.dx + this.nx\r\n        this.yPum = this.dy + this.ny\r\n        if (this.xPum < 0) {\r\n          this.xPum = 0\r\n        }\r\n        if (this.xPum > this.screenW - this.divW) {\r\n          this.xPum = this.screenW - this.divW\r\n        }\r\n        if (this.yPum < 0) {\r\n          this.yPum = 0\r\n        }\r\n        if (this.yPum > this.screenH - this.divH) {\r\n          this.yPum = this.screenH - this.divH\r\n        }\r\n        // console.log(this.xPum , this.yPum, 'this.xPum, this.yPum')\r\n        const moveImg = document.getElementById('moveImg')\r\n        moveImg.style.left = this.xPum + 'px'\r\n        moveImg.style.top = this.yPum + 'px'\r\n        // 阻止页面的滑动默认事件\r\n        document.addEventListener(\r\n          'touchmove',\r\n          function() {\r\n            // 1.2 如果碰到滑动问题，请注意是否获取到 touchmove\r\n            event.stopPropagation() // 阻止冒泡事件\r\n          },\r\n          false\r\n        )\r\n      }\r\n    },\r\n    // 鼠标释放时候的函数\r\n    end() {\r\n      this.flags = false\r\n      console.log(this.xPum / this.rate, this.yPum / this.rate, 'realLeft and realTop')\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.container {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    .img {\r\n        animation: imgSlide 7s linear;\r\n        // animation: name duration timing-function delay iteration-count direction fill-mode;\r\n    }\r\n    .nut-drag {\r\n        position: absolute;\r\n        left: 0px;\r\n        right: 0px;\r\n        top: 0px;\r\n        bottom: 0px;\r\n    }\r\n}\r\n@keyframes imgslide {\r\n    0% {\r\n        transform: scale(1.5);\r\n    }\r\n    25% {\r\n        transform: scale(1);\r\n    }\r\n    50% {\r\n        top: 100px;\r\n    }\r\n    75% {\r\n        top: 60px;\r\n    }\r\n    100% {\r\n        top: 20px;\r\n    }\r\n}\r\n</style>\r\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!./test.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!./test.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./test.vue?vue&type=template&id=66b384df&scoped=true&\"\nimport script from \"./test.vue?vue&type=script&lang=js&\"\nexport * from \"./test.vue?vue&type=script&lang=js&\"\nimport style0 from \"./test.vue?vue&type=style&index=0&id=66b384df&lang=scss&scoped=true&\"\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  \"66b384df\",\n  null\n  \n)\n\nexport default component.exports","module.exports = __webpack_public_path__ + \"img/avator-img.d5105169.png\";"],"sourceRoot":""}