1、需求

最近有个需求就是需要在页面右下角添加一个图标，点击展开通知内容，并且可以拖拽。简要实现如下

image.png

2、实现

我这里使用websocket来获取后台得到的通知消息来进行通知，此处不详细叙述，主要是记录下拖拽功能，由于我们前端使用的是jsp，所以就直接使用js来实现拖拽
1、此处即是右下角的图片

<div id="winpop" class="winpop"></div>
    <div id="imgId" style="cursor: pointer;width: 55px;height: 55px;position: fixed;bottom: 20px;right: 20px;z-index: 9999;">
        <span  title="" >
            <img src='webpage/home/images/notice4.png' alt=""
                 style="width: 55px;height: 55px;
                 box-shadow:-1px 6px 15px #aaa; cursor: pointer;
                 border-radius: 50%;" />
        </span>
    </div>

2、下面是实现拖拽功能的代码

//拖拽角标
        var box = document.getElementById('imgId');
        var isClick = true
        //鼠标按下
            box.onmousedown=function(ev) {
                var oEvent = ev;
                // 浏览器有一些图片的默认事件,这里要阻止
                oEvent.preventDefault();
                var disX = oEvent.clientX - box.offsetLeft;
                var disY = oEvent.clientY - box.offsetTop;
                box.onmousemove=function (ev) {
                    isClick = false
                    oEvent = ev;
                    oEvent.preventDefault();
                    var x = oEvent.clientX -disX;
                    var y = oEvent.clientY -disY;
                    box.style.left = x + 'px';
                    box.style.top = y + 'px';
                }
                // 防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
                box.onmouseleave = function () {
                    box.onmousemove=null;
                    box.onmouseup=null;
                }
                // 鼠标弹起后停止移动
                box.onmouseup=function() {
                    box.onmousemove=null;
                    box.onmouseup=null;
                    console.log(isClick)
                    setTimeout(function(){
                        isClick = true
                    },1000)

                }
            }