jsp实现按钮可拖拽 且不影响正常点击 此处有一详细代码
最近在改PC端, 项目不是前后端分离的 要用原生的Jquery去实现 话不多说 上菜 !!! ~
Html
<link rel="stylesheet" type="text/css" href="<%=sWebRootPath%>/n/css/n.css?v=1">
<div id="draggableButton" style=" width:72px; height:72px;position: fixed; top: 50px; right: 50px;/* background-color: #4CAF50; */ color: white;/* padding: 15px 32px; */ text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border: none; border-radius: 154px; cursor: pointer;">
<img id="imagebtn" style="width:72px;" src="<%=sWebRootPath%>/qianxun/images/qian_logo.png" alt="千寻ai助手" />
</div>
Script
<script type="text/javascript">
var draggableButton = document.getElementById('draggableButton');
var isDragging = false;
var startTime;
var endTime;
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
var clickTimeout;
var moveDistance = 0;
draggableButton.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
isDragging = false;
startTime = new Date().getTime();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
if (!isDragging) {
moveDistance = Math.sqrt((pos3 - e.clientX) ** 2 + (pos4 - e.clientY) ** 2);
if (moveDistance > 5) {
isDragging = true;
}
}
if (isDragging) {
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
draggableButton.style.top = (draggableButton.offsetTop - pos2) + "px";
draggableButton.style.left = (draggableButton.offsetLeft - pos1) + "px";
}
}
function closeDragElement() {
endTime = new Date().getTime();
isDragging = false;
document.onmouseup = null;
document.onmousemove = null;
// 设置一个短暂的延迟,在这段时间内点击视为误触
clearTimeout(clickTimeout);
if (moveDistance > 5 || endTime - startTime < 100) {
clickTimeout = setTimeout(() => {
moveDistance = 0;
}, 200);
} else {
// 如果是点击事件
/* alert('按钮被点击了!'); */
var screenWidth = $(document).width();
// 计算新窗口的左边界,使其右对齐
var left = screenWidth - 400;
// 获取屏幕高度
var screenHeight = $(document).height();
// 设置窗口特性字符串
var windowFeatures = 'width=500,height='+screenHeight+',left='+left+',top=0';
// 打开新窗口
window.open('', '_blank', windowFeatures);
}
}
</script>