移动端实现按钮在屏幕上拖拽

<!-- 拖拽滑动 -->
<template>
  <div id="default_drag_comp" v-show="activeBtnShow"
    @click="goNext"
    @touchstart="down"
    @touchmove="move"
    @touchend="end"
  >
   <img src="../../src/assets/image/home_click.png" alt="" @click="gotoActivity">
    <img src="../../src/assets/image/drag.png" alt="" @click="close">
  </div>
</template>

<script>
var jsbridge = require("../../src/util/jsbridge.js");
export default {
  name: "defaultDrag",
  props:{
    btnShow:true
  },
  data() {
    return {
      flags: false,
      position: { x: 0, y: 0 },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
      activeBtnShow:this.btnShow,
     
    };
  },
  activated(){
   
    this.activeBtnShow = this.btnShow
  },
  methods: {
    gotoActive(){
// H5上直接跳转 window.location.href = 'https://new.3tlife.cn/contents/2/5981.html'
// 用于混合app中的原生跳转
  // jsbridge.setupWebViewJavascriptBridge(function(bridge) {          //  bridge.callHandler("params", url, function(data) {});     //  });

}, goNext() { this.$emit("goNext"); }, close(){ this.activeBtnShow =false }, // 实现移动端拖拽 down(event) { let default_drag_comp = document.querySelector("#default_drag_comp"); this.flags = true; var touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } this.maxW = document.documentElement.clientWidth - default_drag_comp.offsetWidth; this.maxH = document.documentElement.clientHeight - default_drag_comp.offsetHeight; this.position.x = touch.clientX - default_drag_comp.offsetLeft; this.position.y = touch.clientY - default_drag_comp.offsetTop; this.dx = touch.clientX; this.dy = touch.clientY; }, move(event) { event.preventDefault(); let default_drag_comp = document.querySelector("#default_drag_comp"); if (this.flags) { var touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } this.nx = touch.clientX - this.position.x; this.ny = touch.clientY - this.position.y; if (this.nx < 0) { this.nx = 0; } else if (this.nx > this.maxW) { this.nx = this.maxW; } if (this.ny < 0) { this.ny = 0; } else if (this.ny >= this.maxH) { this.ny = this.maxH; } // console.log(this.ny,'ny',this.maxH,'maxH') // console.log(document.documentElement.clientWidth,'H') default_drag_comp.style.left = this.nx + "px"; default_drag_comp.style.top = this.ny + "px"; //阻止页面的滑动默认事件;如果碰到滑动问题,1.2 请注意是否获取到 touchmove document.addEventListener( "touchmove", function() { // event.preventDefault(); }, false ); } }, //鼠标释放时候的函数 end() { this.flags = false; } } }; </script> <style scoped lang="scss"> #default_drag_comp { width: 0.75rem; height: 1rem; position: fixed; z-index: 1000; bottom: 1.6rem; right: 0.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; img:first-child { width:100%; height: 0.75rem; border-radius: 50%; } img:last-child { width:0.15rem; height: 0.15rem; margin-top: 0.1rem; } } </style>

 

上一篇:HTML5 drag api 的使用


下一篇:ItemTouchHelper源码分析