vue实现拖拽

<template>

  <div id="app" ref="parentNode">

    <button @click="isOpen = !isOpen">边界 /{{ !isOpen ? "关" : "开" }}</button>

    <div class="target" ref="sonNode" @mousedown="movePos">

      X: {{ positionX }} <br />

      Y: {{ positionY }}

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      positionX: 0,

      positionY: 0,

      isOpen: false,

    };

  },

  methods: {

    movePos(e) {

      //目标元素

      let el = e.target;

      let posX = e.clientX - el.offsetLeft;

      let posY = e.clientY - el.offsetTop;

      document.onmousemove = (e) => {

        //计算元素位置(需要判断临界值)

        let left = e.clientX - posX;

        let top = e.clientY - posY;

        /*****  临界值 starting（此区域代码可注释）  ***/

        if (this.isOpen) {

          // 获取父元素 自元素 的宽高

          let { offsetHeight: parentNodeHeight, offsetWidth: parentNodeWidth } =

            this.$refs.parentNode;

          let { offsetHeight: sonNodeHeight, offsetWidth: sonNodeWidth } =

            this.$refs.sonNode;

          // 左上角(left)

          if (left < 0) {

            left = 0;

          }

          if (top < 0) {

            top = 0;

          }

          // 左下角

          if (top > parentNodeHeight - sonNodeHeight) {

            top = parentNodeHeight - sonNodeHeight;

          }

          if (left > parentNodeHeight - sonNodeWidth) {

            left = parentNodeHeight - sonNodeWidth;

          }

        }

        /*****  临界值 ending  ***/

        this.positionX = top;

        this.positionY = left;

        //移动当前元素

        el.style.left = left + "px";

        el.style.top = top + "px";

      };

      document.onmouseup = (e) => {

        document.onmousemove = null;

        document.onmouseup = null;

      };

    },

  },

};

</script>

<style scoped>

#app {

  position: relative;

  width: 500px;

  background: #999;

  height: 500px;

}

.target {

  position: absolute;

  left: 0;

  right: 0;

  width: 100px;

  height: 50px;

  background: red;

  cursor: pointer;

}

</style>