鼠标按下以及松开事件，实现容器在网页移动任意位置

<template>
    <div class="main">
        <div class="mainf" v-bind:style="main_block" @mousedown="sum_block_ON"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                main_block: ''
            }
        },
        mounted() {
            // 鼠标的按下或松开事件分别是onmousedown和onmouseup事件。

            // window.addEventListener('mousedown',this.sum_block_ON)
            window.addEventListener('mouseup', this.sum_block_NO)

        },
        methods: {
            sum_block_ok(e) {
                var newLeft = e.clientX;
                var newTop = e.clientY;

                var sum_block = 'left:' + newLeft + 'px;top:' + newTop + 'px;';
                this.main_block = sum_block;
            },
            sum_block_ON() {
                window.addEventListener('mousemove', this.sum_block_ok)
            },
            sum_block_NO() {
                window.removeEventListener('mousemove', this.sum_block_ok)
            }
        }
    };
</script>

<style>
    .main {
        position: relative;
    }

    .mainf {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: rosybrown;
        z-index: 99;
        margin-left: -50px;
        margin-top: -50px;
    }
</style>