VUE 通过 鼠标 按下 抬起 实现 图标 拖动功能

  <!-- 固定定位  @mousemove="onMousemove"  @mouseup="onMouseup"  悬浮框 进度-->
    <div class="progress hoverEvent" :class="[{Progress:isProgress}]" 
    id="oBox"   
    @click="progressBtn"
    @mousedown="onMouseDown" 
        >
        <img v-if="isProgress" src="./images/send1.svg"
            style="width: 20px; vertical-align: text-bottom;margin-right: 2px;" alt="" srcset="">
        <img v-if="!isProgress" src="./images/send1.svg"
            style="width: 24px; vertical-align: text-bottom; margin-right: 2px;" alt="" srcset="">
    </div>

//鼠标按下事件 进度

        onMouseDown(event) {
            console.log('鼠标按下');
            this.startTime = new Date().getTime()
            //事件对象
            const oBox = document.getElementById("oBox")
            const app = document.getElementById("app")

            // oBox.removeAttribute('onclick');
            event = event || window.event;

            //计算鼠标与盒子左侧和上方的距离

            //左侧距离 = 鼠标水平坐标-盒子左侧偏移距离（offsetLeft）

            //上方距离 = 鼠标垂直坐标-盒子上方偏移距离（offsetTop）

            var lf = event.clientX - oBox.offsetLeft;

            var tp = event.clientY - oBox.offsetTop;
            // oBox.style.cursor = 'move';
            //2、鼠标移动，盒子随着鼠标移动而移动

            let time = setTimeout(() => {
                console.log('鼠标移动事件');
                document.getElementById("app").onmousemove = (event) => {
                    this.elIsMove = true
                    event = event || window.event;

                    //获取鼠标水平&垂直方向的坐标

                    var mouseLeft = event.clientX;

                    var mouseTop = event.clientY;
                    let left = mouseLeft - lf;
                    let top = mouseTop - tp;

                    //设置盒子的left&top值，注意：要为元素加上定位
                    // 解决边界问题
                    if (parseInt((app.offsetWidth - left)) > parseInt(10) && parseInt(left) > parseInt(0)) {
                        oBox.style.left = left + "px"
                    }
                    if (parseInt((app.offsetHeight - top)) > parseInt(10) && parseInt(top) > parseInt(0)) {
                        oBox.style.top = top + "px"
                    }
                    return false;
                }
            }, 200)

            document.onmouseup = (e) => {
                console.log('鼠标抬起');
                this.endTime = new Date().getTime()
                console.log('鼠标按下抬起时间差', this.endTime - this.startTime);
                clearTimeout(time)
                document.getElementById('app').onmousemove = null;
                document.onmouseup = null;
            };



        },

// 进度点击

        progressBtn() {

            if (this.elIsMove) {
                this.elIsMove = false; //如果状态是true，则证明元素被移动过，不触发click调用的方法
                return;
            }
            console.log('执行click事件');
            if (this.progressDialogVisible) {
                this.progressDialogVisible = false
            } else {
                this.progressinit('click')
            }
            // this.progressDialogVisible = true
            // this.agGridProgress([{
            //     sendStatus: '8888888888888888'
            // }])
            // this.progressDialogVisible = true

        },

监听 窗口大小位置

function watchWindowSize() {

    // 获取窗口的宽度和高度，不包括滚动条
    const oBox = document.getElementById("oBox")
    const app = document.getElementById("app")

    //    setTimeout(()=>{

    if (window.screenTop != 0) {
        oBox.style.top = 500 - window.screenTop + "px"


        //    },200)
    } else {
        oBox.style.top = 500 + "px"
    }
    if (window.screenLeft != 0) {
        oBox.style.left = app.offsetWidth + "px"

    } else {
        oBox.style.left = app.offsetWidth + "px"
    }


}