茉莉兰亭

1
// 距离元素左侧距离
2
e.pageX - element.getBoundingClientRect().left
3
// 距离元素上方距离
4
e.pageY - element.getBoundingClientRect().top

1
<div ref="mainRef" class="main">
2
    <div ref="areaRef" class="area" @mousedown.prevent="areaMouseDown($event)"></div>
3
</div>

1
export default {
2
    data() {
3
        return {
4
            areaStartMove: false, // 目标是否开始移动
5
            mainAttr: {}, // 目标的容器定位数据
6
            areaAttr: {} // 目标定位数据
7
        }
8
    },
9
    // 组件加载时注册鼠标移动和弹起事件
10
    mounted() {
11
        document.body.addEventListener('mousemove', this.areaMouseMove)
12
        document.body.addEventListener('mouseup', this.areaMouseUp)
13
    },
14
    // 组件卸载时注册鼠标移动和弹起事件
15
    destroyed() {
16
        document.body.removeEventListener('mousemove', this.areaMouseMove)
17
        document.body.removeEventListener('mouseup', this.areaMouseUp)
18
    },
19
    methods: {
20
        areaMouseDown(e) {
21
            const areaElement = e.currentTarget
22
            this.areaStartMove = true
23
            // 分别获取目标容器和目标的定位数据
24
            this.mainAttr = this.$refs.mainRef.getBoundingClientRect()
25
            this.areaAttr = areaElement.getBoundingClientRect()
26
            // 获取鼠标距离目标左侧和上方的距离，存入目标定位数据中
27
            this.areaAttr.clientX = e.pageX - this.areaAttr.left
28
            this.areaAttr.clientY = e.pageY - this.areaAttr.top
29
        },
30
        areaMouseMove(e) {
31
            // 如果目标为移动状态， 再执行相关方法
32
            if (this.areaStartMove) {
33
                const areaElement = this.$refs.areaRef
34
                // 根据固定的鼠标距离目标左侧和上方的距离，分别求得目标此时绝对定位的left和top
35
                const top = e.pageY - this.mainAttr.top - this.areaAttr.clientY
36
                const left = e.pageX - this.mainAttr.left - this.areaAttr.clientX
37
                // 获取最大left和top
38
                const maxTop = this.mainAttr.height - this.areaAttr.height
39
                const maxLeft = this.mainAttr.width - this.areaAttr.width
40
                // 赋予样式值，移动时不能超出边界
41
                if (top <= 0) {
42
                    areaElement.style.top = '0'
43
                } else if (top >= maxTop) {
44
                    areaElement.style.top = maxTop + 'px'
45
                } else {
46
                    areaElement.style.top = top + 'px'
47
                }
48
                if (left <= 0) {
49
                    areaElement.style.left = '0'
50
                } else if (left >= maxLeft) {
51
                    areaElement.style.left = maxLeft + 'px'
52
                } else {
53
                    areaElement.style.left = left + 'px'
54
                }
55
            }
56
        },
57
        // 鼠标弹起，移除目标的移动状态
58
        areaMouseUp() {
59
            if (this.areaStartMove) {
60
                this.areaStartMove = false
61
            }
62
        }
63
    }
64
}

1
.main {
2
  position: relative;
3

4
  .area {
5
    position: absolute;
6
    width: 100px;
7
    height: 40px;
8
    top: 0;
9
    left: 0;
10
    border: 2px dotted #ccc;
11
    border-radius: 2px;
12
    cursor: move;
13
  }
14
}