在vue项目中用JS写一个拖拽效果

上图


贴代码
拖拽的盒子：<div id="goHome" class="goHome" @click="gopush()"> <div></div> </div>
CSS的样式：

 .goHome > div {
  width: 36px;
  height: 36px;
  background: url("/static/images/fhzy.png");
  background-size: 100% 100%;
  z-index: 999990;
  cursor: pointer;
}

.goHome {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 4px;
  /* cursor: pointer; */
  position: absolute;
  right: 0%;
  top: 50%;
  z-index: 999990;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

methods:里面的JS代码

 // 点击事件
    gopush() {
      if (this.flagDrag <= 1) {
        window.location.href = "***********";
      } else {
        this.flagDrag = 0;
      }
    },
    // 拖拽代码
    drag() {
      let _this = this;
      var odiv = document.getElementById("goHome");
      odiv.onmousedown = function (eve) {
        eve = eve || window.event;
        var clientX = eve.clientX;
        var clientY = eve.clientY;
        var odivX = odiv.offsetLeft;
        var odivY = odiv.offsetTop;
        var odivLeft = clientX - odivX;
        var odivTop = clientY - odivY;
        var odivRight = odiv.parentNode.offsetWidth - odiv.offsetWidth;
        var odivBottom = odiv.parentNode.offsetHeight - odiv.offsetHeight;
        document.onmousemove = function (e) {
          _this.flagDrag = _this.flagDrag + 1;
          e.preventDefault();
          var left = e.clientX - odivLeft;
          if (left < 0) {
            left = 0;
          }
          if (left > odivRight) {
            left = odivRight;
          }
          var Top = e.clientY - odivTop;
          if (Top < 0) {
            Top = 0;
          }
          if (Top > odivBottom) {
            Top = odivBottom;
          }
          odiv.style.left = left + "px";
          odiv.style.top = Top + "px";
        };
        // 松开鼠标后固定位置
        document.onmouseup = function (e) {
          document.onmouseup = null;
          document.onmousemove = null;
        };
        odiv.onmouseup = function (e) {
          document.onmouseup = null;
          document.onmousemove = null;
        };
      };
    },

data里面的

  data() {
    return {
      startOffsetX: null,
      startOffsetY: null,
      activeNume: 0,
      flagDrag: 0,
    };
  },

mounted()里面的

  mounted() {
    this.MeMap();
    this.drag();
  },

接下来就可以使用了然后在div里面自己加想要的样式