用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
        };