鼠标监视 | 拖拽方块

鼠标监视 | 拖拽方块 | Vue

news2024/11/24 11:05:56

title: 拖拽功能
tags: Vue
categories: JavaScript
abbrlink: 18a433ce
date: 2022-11-26 21:14:19

效果

mouse

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听鼠标行为</title>
    <!-- Date: 2022-11-24 12:44:52 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body,
        #app {
            width: 100%;
            height: 100%;
            user-select: none;
        }

        #app {
            background-color: bisque;
        }

        #x,
        #y {
            background-color: black;
            position: absolute;
        }

        #x {
            width: 100%;
            height: 1px;
        }

        #y {
            width: 1px;
            height: 100%;
        }

        #GoldHB {
            width: 100px;
            background-color: gold;
            position: absolute;
            opacity: 50%;
            text-align: center;
        }

        #GoldHB:hover {
            cursor: move;
            background-color: greenyellow;
            border-radius: 70%;
        }
    </style>
</head>

<body>
    <!-- 非input元素绑定键盘事件，需要加tabindex属性或者设置contenteditable属性为true, 需先点击元素后生效 -->
    <div id="app" @mousemove="showPos" @mousedown="showButton" @mousewheel="scrolling">
        <!-- 动态CSS -->
        <div id="x" :style="{top: topSty}"></div>
        <div id="y" :style="{left: x+'px'}"></div>

        <h1> 鼠标当前坐标: ({{position}}) </h1>
        <h1>你刚点击了 {{mouseBut}} </h1>
        <h1>你刚按下了 {{keyBut}} </h1>
        <h1>窗口中可视区域大小: {{window.innerWidth}}, {{window.innerHeight}} </h1>
        <h1>拖动"我"试试, 或者滑动滚轮</h1>
        <!-- 拖拽功能 -->
        <div @mousedown.left="draging" id="GoldHB" :style="sty_GoldHB"></div>
    </div>
    <script>

        const vm = new Vue({
            el: '#app',
            data: {
                x: 0,
                y: 0,
                butCode: "",
                keyBut: "",
                // 优势, 可以方便的在这里添加更多动态的css样式
                sty_GoldHB: {
                    height: '100px',
                    top: '142px',
                    left: '40px',
                },
                window,
            },
            created() {
                // 全局监听 键盘按下事件
                document.onkeydown = this.keyButton;
            },
            methods: {
                showPos(e) {
                    // 偏移一个像素, 使鼠标能点中其他元素
                    this.x = e.clientX - 1;
                    this.y = e.clientY - 1;
                },
                showButton(e) {
                    this.butCode = e.button;
                },
                keyButton(e) {
                    this.keyBut = e.key;
                },
                scrolling(e) {
                    let h = parseInt(this.sty_GoldHB.height);
                    let w = e.wheelDelta / 10;
                    if ((h += w) < 0) h = 0;
                    this.sty_GoldHB.height = h + 'px';
                },
                draging(e) {
                    // 获取目标元素
                    let divGold = e.target;
                    // 当鼠标按下，就获得鼠标在盒子内的坐标(x,y)
                    let x = e.pageX - divGold.offsetLeft;
                    let y = e.pageY - divGold.offsetTop;
                    // 重新设置盒子距离左上的距离=> 当前鼠标的位置 - 点击时, 鼠标在盒子中的坐标
                    let move = () => {
                        // 这里的this指向Vue
                        this.sty_GoldHB.left = (this.x - x) + 'px';
                        this.sty_GoldHB.top = (this.y - y) + 'px';
                    }
                    // 添加鼠标移动事件
                    document.addEventListener('mousemove', move);
                    // 添加鼠标释放事件, 一旦释放鼠标, 移除鼠标移动事件, 即停止移动
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', move)
                    })
                },
            },
            computed: {
                position() {
                    return this.x + ", " + this.y;
                },
                mouseBut() {
                    let arr = ["鼠标左键", "鼠标中键", "鼠标右键"];
                    return arr[this.butCode];
                },
                topSty() {
                    return this.y + 'px';
                },
            }
        })
    </script>
</body>

</html>