可以鼠标拖动的组件

在main.js里

Vue.directive("drag", {
  //1.指令绑定到元素上回立刻执行bind函数，只执行一次
  //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
  //3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
  bind: function(el) {},
  //inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
  inserted: function(el) {
    let odiv = el; //获取当前元素
    let firstTime = "",
      lastTime = "";
      let gap = 10 //缝隙：小于缝隙时，则吸附
		let parent = el.offsetParent
    el.onmousedown = function(e) {
      var eleEvent = event || window.event //event的兼容,同时得到clientX,的值
			var x = eleEvent.clientX - el.offsetLeft;
			var y = eleEvent.clientY - el.offsetTop;
			var left = 0;
			var top = 0;
      firstTime = new Date().getTime();
      document.onmousemove = function(eve) {
        // el.style.left = e.pageX - disx + 'px';
        // el.style.top = e.pageY - disy + 'px';

        left = eve.clientX - x;
        top = eve.clientY - y;

        // 左
        if (left >= gap) {
          left = 0;
        }

        //右
        if (left <= parent.offsetWidth - el.offsetWidth - gap) {
          //大于整个盒子的宽度-小盒子的宽度
          left = parent.offsetWidth - el.offsetWidth;
        }

        // 上
        // if (top <= gap) {
        //   top = 0;
        // }

        // // 下
        // if (top >= parent.offsetHeight - el.offsetHeight - gap) {
        //   top = parent.offsetHeight - el.offsetHeight;
        // }

        el.style.left = left + "px";
        // el.style.top = top + "px";
      };
      document.onmouseup = function(event) {
        document.onmousemove = document.onmouseup = null;
        lastTime = new Date().getTime();
        if (lastTime - firstTime > 500) {
          odiv.setAttribute("ele-flag", true);
          event.stopPropagation();
        }
        setTimeout(function() {
          odiv.setAttribute("draging-flag", false);
        }, 100);
      };
    };
  },
});

在vue文件里

      <div class="info">
        <div class="infolist" v-drag @click="handleDragClick">
          <div
            class="infobox"
            v-for="(item, index) in info"
            :key="index"
            @click="changeIot(index)"
          >
            <div class="infoIcon">
              <img
                :src="require('@/assets/imgs/plant/' + item.icon + '.png')"
                alt=""
              />
            </div>
            <div class="infovalue">
              <div class="infoname">{{ item.name }}</div>
              <div class="infoValuebox">
                <div class="infoValue">{{ item.value }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

methods

    handleDragClick(e) {
      console.log(121212122);
      // 判断拖拽组件的状态
      let isDrag = false;
      try {
        isDrag = e.target.getAttribute("ele-flag") === "true";
      } catch (e) {}
      if (isDrag) {
        return;
      }
      // 当推拽组件未在 拖动状态 执行点击事件
      // todo 下面是执行点击事件的代码
    },

style

    .info {
      height: calc(85 / 1080 * 100vh);
      margin-bottom: calc(10 / 1080 * 100vh);
      border-bottom: 1px solid #1ac9ff;

      overflow: hidden;
      position: relative;
      .infolist {
        position: absolute;
        width: 2320px;
        cursor: pointer;
        .infobox {
          float: left;
          margin-left: 15px;
          width: 150px;
          // height: 66px;
          height: calc(66 / 1080 * 100vh);
          border: 1px solid #0f5d74;
          .infoIcon {
            float: left;
            width: 50px;
            // height: 52px;
            height: calc(60 / 1080 * 100vh);
            img {
              width: 100%;
              height: 100%;
            }
          }
          .infovalue {
            float: left;
            width: 84px;
            .infoname {
              width: 100px;
              text-align: left;
              margin-top: calc(5 / 1080 * 100vh);
              color: #c3f4fe;
              // margin-bottom: calc(50 / 1080 * 100vh);
            }
            .infoValuebox {
              width: 74px;
              height: calc(34 / 1080 * 100vh);
              background-color: RGBA(23, 55, 83, 0.8);
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 6px;
              .infoValue {
                width: 70px;
                // height: 30px;
                height: calc(30 / 1080 * 100vh);
                text-align: center;
                line-height: calc(26 / 1080 * 100vh);
                border: 2px solid #0d243d;
                border-radius: 5px;
                font-size: calc(20 / 1080 * 100vh);
                // background-image: linear-gradient(180deg, #ffffff, #ffd338);
                // background-clip: text;
                // -webkit-background-clip: text;
                color: #ffd338;
                background-color: RGBA(23, 55, 83, 0.8);
              }
            }
          }
        }
      }
    }