VUE PC端可拖动悬浮按钮的实现代码

<template>
    <div>
        <div class="sssss">
            <div class="callback float" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseover="over" @mouseout="out"
                @mouseup="end" @touchend="end" ref="fu" style="color: #1a1919;">
                <el-button circle @click="screen()">
                    {{name}}
                </el-button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "suspensionBall",
        props: {
            name: {
                type: String,
                default: '打开全屏'
            },
        },
        data() {
            return {
                left: 0,
                top: 40,
                bg: 1,
                menu: false,
                isLoading: false,
                flags: false, //控制使用
                position: {
                    x: 0,
                    y: 0,
                },
                nx: "",
                ny: "",
                dx: "",
                dy: "",
                xPum: "",
                yPum: "",
                movb: 1,
                num: 1,
            };
        },
        created() { },
        mounted() {
            this.left = this.$refs.fu.offsetLeft - 750;
        },
        methods: {
            out2() {
                this.menu = false;
            },
            over2() { },
            out() {
                this.bg = 2;
            },
            over() {
                this.menu = true;
                this.num = 2;
                this.bg = 1;
            },
            callback() {
                this.$router.go(-1);
            },
            onRefresh() {
                // window.location.reload();
                setTimeout((res) => {
                    console.log(res);
                    this.isLoading = false;
                }, 1000);
            },
            down() {
                this.flags = true;
                var touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                this.position.x = touch.clientX;
                this.position.y = touch.clientY;
                this.dx = this.$refs.fu.offsetLeft;
                this.dy = this.$refs.fu.offsetTop;
            },
            move() {
                if (this.flags) {
                    this.movb = 2;
                    this.menu = false;
                    var touch;
                    if (event.touches) {
                        touch = event.touches[0];
                    } else {
                        touch = event;
                    }
                    this.nx = touch.clientX - this.position.x;
                    this.ny = touch.clientY - this.position.y;
                    this.xPum = this.dx + this.nx;
                    this.yPum = this.dy + this.ny;
                    let width = window.innerWidth - this.$refs.fu.offsetWidth; //屏幕宽度减去自身控件宽度
                    let height = window.innerHeight - this.$refs.fu.offsetHeight; //屏幕高度减去自身控件高度
                    this.xPum < 0 && (this.xPum = 0);
                    this.yPum < 0 && (this.yPum = 0);
                    this.xPum > width && (this.xPum = width);
                    this.yPum > height && (this.yPum = height);
                    // if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
                    this.$refs.fu.style.left = this.xPum + "px";
                    this.$refs.fu.style.top = this.yPum + "px";
                    this.left = this.xPum - 750;
                    this.top = this.yPum;
                    // }
                    //阻止页面的滑动默认事件
                    document.addEventListener(
                        "touchmove",
                        function () {
                            event.preventDefault();
                        },
                        false
                    );
                }
            },
            //鼠标释放时候的函数
            end() {
                this.flags = false;
            },
            screen() {
                this.$emit("changeClick");
            },
        },
    };
</script>
<style scoped>
    .callback {
        position: fixed;
        width: 200px;
        height: 20px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 200px;
        left: 90%;
        z-index: 99999;
    }
    .float {
        position: fixed;
        touch-action: none;
        text-align: center;
        border-radius: 24px;
        line-height: 48px;
        color: white;
    }
    .menuclass {
        text-align: left;
        position: absolute;
        color: #000;
        width: 764px;
        background: #ffffff;
        box-shadow: 0px 6px 26px 1px rgba(51, 51, 51, 0.16);
        padding: 20px;
    }
    .sssss {
        position: relative;
        background-color: #000;
        right: 0;
        z-index: 99999;
    }
    .titlea {
        font-size: 18px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
    }
    .boxa {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        z-index: 999999;
    }
    .item {
        width: 168px;
        height: 75px;
        border-radius: 4px 4px 4px 4px;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        margin-left: 7px;
        line-height: 75px;
    }
</style>

<template>
    <div>
        <float-button ref="floatButton" :name="buttonName" @changeClick="screen" />
    </div>
</template>
<script>
import FloatButton from './chart/FloatButton'
export default {
        name: 'Index',
        components: {
            FloatButton
        },
}
</script>