用js實作按鈕的拖拽

最近做了一個需求，要求實作客服按鈕的拖拽效果。

本來以為隻是一個簡單的拖拽效果，最後做起來卻發現在拖拽結束的時候會觸發按鈕的點選事件。

查了一些文章後解決了這個問題，下面貼上代碼：

html：

<div id="dragService" v-drag></div>
           

css： 

#dragService{
position: fixed;
width: 50px;
height: 50px;
top:40%;
right: 20px;
z-index: 11;
background:red;
cursor: pointer;
}
           

js：

let flag = false
        let disX;
        let disY;
        let startTime
        let endTime
        el.onmousedown = (e) => {
            e.stopPropagation();
            e.preventDefault();
            //算出滑鼠相對元素的位置
            flag = true
            disX = e.clientX - el.offsetLeft;
            disY = e.clientY - el.offsetTop;
            startTime = new Date().getTime();
        };
        el.onclick = (e) => {
            if (endTime-startTime <= 180) {
                window.open('https://www.baidu.com')
            }
        };
        document.onmousemove = (e)=>{
            if (flag) {
                // 用滑鼠的位置減去滑鼠相對元素的位置，得到元素的位置
                let left = e.clientX - disX;
                let top = e.clientY - disY;

                // 設定按鈕移動的邊界
                if (top < 0) {
                    top = 0
                } else if (top > document.body.clientHeight - el.offsetHeight) {
                    top = document.body.clientHeight - el.offsetHeight
                }
                if (left < 0) {
                    left = 0
                } else if (left > document.body.clientWidth - el.offsetWidth) {
                    left = document.body.clientWidth - el.offsetWidth
                }
                // 移動目前元素
                el.style.left = left + 'px';
                el.style.top = top + 'px';

            }
        };
        document.onmouseup = (e) => {
            endTime = new Date().getTime()
            flag = false
            return false
        };