之前为完成网页边侧放置一个可点击的图标,但图标有时会影响用户浏览网页,所以需要可以拖拽图片更改其位置。但是在实现过程中总是会在拖拽结束松开鼠标时总是会弹出对话框,最终经过多次更改终于完成了这个功能!
在html中放入一个图片:
<div>
<img src="这里是您的图片地址" id="dragImg" alt="image">
</div>
js实现:
<script>
// 获取图片元素
var robot = document.getElementById("dragImg");
// 设置图片元素为可拖拽
robot.addEventListener("mousedown", dragStart, false);
// 定义拖拽起始位置的偏移量
var offsetX = 0;
var offsetY = 0;
// 标记拖拽是否发生
var isDragging = false;
// 处理拖拽开始事件
function dragStart(event) {
offsetX = event.clientX - robot.offsetLeft;
offsetY = event.clientY - robot.offsetTop;
window.addEventListener("mousemove", drag, false);
window.addEventListener("mouseup", dragEnd, false);
isDragging = false; // 重置标志变量
}
// 处理拖拽过程中的事件
function drag(event) {
robot.style.left = (event.clientX - offsetX) + "px";
robot.style.top = (event.clientY - offsetY) + "px";
isDragging = true; // 设置拖拽标志为true
}
// 处理拖拽结束事件
function dragEnd() {
window.removeEventListener("mousemove", drag, false);
window.removeEventListener("mouseup", dragEnd, false);
}
// 处理点击机器人图标的事件
robot.addEventListener("click", showDialog, false);
// 显示对话框
function showDialog() {
if (!isDragging) {
alert("对话框内容");
}
}
</script>
此外图片的样式为:
#dragImg {
position: absolute;
width: 50px;
height: 50px;
background-color: #f0f0f0;
border-radius: 50%;
text-align: center;
cursor: pointer;
}
这是我随意写的一个样式,主要是设置绝对定位!
如果isDragging未能达到效果的话,我们可以选择记录mousedown和mouseup时的鼠标位置,当位置未发生改变时再弹出对话框。