1、需求

最近有個需求就是需要在頁面右下角添加一個圖標，點擊展開通知內(nèi)容，并且可以拖拽。簡要實現(xiàn)如下

image.png

2、實現(xiàn)

我這里使用websocket來獲取后臺得到的通知消息來進行通知，此處不詳細敘述，主要是記錄下拖拽功能，由于我們前端使用的是jsp，所以就直接使用js來實現(xiàn)拖拽
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、下面是實現(xiàn)拖拽功能的代碼

//拖拽角標
        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';
                }
                // 防止移動過快觸發(fā)鼠標移出事件,導致鼠標彈起事件失效
                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)

                }
            }