vue实现拖拽小图标

如何给vue项目里面写拖拽悬浮小图标呢，供大家参考，具体内容如下

首先

1、html文件 一定要给父盒子一个ID

<div      class="xuanfu"      id="moveDiv"      @mousedown="down()"      @touchstart="down()"      @mousemove.prevent.stop="move()"      @touchmove.prevent.stop="move()"      @mouseup="end()"      @touchend="end()"    >      <img class="img-kf" src="../../assets/images/csVip/kf.png" /></div>

2、在data里面设置

position: { x: 0, y: 0 },      nx: "",      ny: "",      dx: "",      dy: "",      xPum: "",      yPum: "",

3、在方法里面写拖拽方法

//移动端拖拽事件    down() {      this.flags = true;      let touch;      if (event.touches) {        touch = event.touches[0];      } else {        touch = event;      }      this.position.x = touch.clientX;      this.position.y = touch.clientY;      this.dx = moveDiv.offsetLeft;      this.dy = moveDiv.offsetTop;    },    move() {      if (this.flags) {        let 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;        this.xPum = this.dx + this.nx;        this.yPum = this.dy + this.ny;        //添加限制：只允许在屏幕内拖动        //屏幕宽度减去悬浮框宽高        const maxWidth = document.body.clientWidth - 54;        const maxHeight = document.body.clientHeight - 54;        if (this.xPum < 0) {          //屏幕x限制          this.xPum = 0;        } else if (this.xPum > maxWidth) {          this.xPum = maxWidth;        }        if (this.yPum < 0) {          //屏幕y限制          this.yPum = 0;        } else if (this.yPum > maxHeight) {          this.yPum = maxHeight;        }        moveDiv.style.left = this.xPum + "px";        moveDiv.style.top = this.yPum + "px";        //阻止页面的滑动默认事件        document.addEventListener(          "touchmove",          function () {            // 1.2 如果碰到滑动问题，请注意是否获取到 touchmove            // event.preventDefault(); //jq 阻止冒泡事件            event.stopPropagation(); // 如果没有引入jq 就用 stopPropagation()          },          false        );      }    },    //鼠标释放时候的函数    end() {      this.flags = false;    },

4、css样式

.xuanfu {    width: 1.7rem;    height: 1.7rem;    border-radius: 50%;    // background: rgb(213, 91, 91);    position: fixed;    bottom: 4rem;    right: 0.4rem;    z-index: 9999999999;    text-align: center;    .img-kf {      width: 1.7rem;      height: 1.7rem;    }  }

到这里，我们的悬浮小图标就做完了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。