用js实现按钮的拖拽

最新推荐文章于 2025-05-05 10:10:49 发布

你不要说话啊

最新推荐文章于 2025-05-05 10:10:49 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：拖拽 js 按钮拖拽前端开发

本文链接：https://blog.youkuaiyun.com/lareinalove/article/details/94014466

最近做了一个需求，要求实现客服按钮的拖拽效果。

本来以为只是一个简单的拖拽效果，最后做起来却发现在拖拽结束的时候会触发按钮的点击事件。

查了一些文章后解决了这个问题，下面贴上代码：

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) {
                windo