1冈涧、需求
最近有個需求就是需要在頁面右下角添加一個圖標盏触，點擊展開通知內容的榛，并且可以拖拽晰筛。簡要實現(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)
}
}
