<template>
  <div>
    <div id=”moveDiv” ref=”moveDiv”>
      <span
        v-for=”(item, index) in 2″
        :key=”index”
        @mousedown=”move”
        :class=”‘div’ + index”
        :style=”movePosition[index]”
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movePosition: [
        {
          className: “div0”,
          left: “78px”,
          top: “25px”,
        },
        {
          className: “div1”,
          left: “80px”,
          top: “100px”,
        },
      ],
      newPostion: [],
    };
  },
  methods: {
    move(e) {
      let odiv = e.target;
      let disX = e.clientX – odiv.offsetLeft;
      let disY = e.clientY – odiv.offsetTop;
      document.onmousemove = (e) => {
        let left = e.clientX – disX;
        let top = e.clientY – disY;
        let { offsetHeight: pondModelHeight, offsetWidth: pondModelWidth } =
          this.$refs.moveDiv;
        let { offsetHeight: sonNodeHeight, offsetWidth: sonNodeWidth } = odiv;
        // 左上角(left)
        if (left < 0) {
          left = 0;
        }
        if (top < 0) {
          top = 0;
        }
        // 左下角
        if (top > pondModelHeight – sonNodeHeight) {
          top = pondModelHeight – sonNodeHeight;
        }
        if (left > pondModelWidth – sonNodeWidth) {
          left = pondModelWidth – sonNodeWidth;
        }
        odiv.style.left = left + “px”;
        odiv.style.top = top + “px”;
        odiv.style.zIndex = 999;
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
        odiv.style.zIndex = 1;
        console.log(odiv.style.left);
        console.log(odiv.className);
        this.newPostion.push({
          className: odiv.className,
          left: odiv.style.left,
          top: odiv.style.top,
        });
        odiv = null;
      };
    },
  },
};
</script>

<style lang=”scss” scoped>
#moveDiv {
  width: 500px;
  height: 500px;
  position: relative;
  border: 1px solid #000;
}
#moveDiv span {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  cursor: move;
}
</style>

原文地址：http://www.cnblogs.com/2587jsq/p/16814259.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性