JS实现图片拖拽、自定义菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义右键菜单-地图缩放移动结合</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff4c8;
}
#box {
position: relative;
800px;
height: 400px;
border: solid #46696b;
border-radius: 50px;
margin: 80px auto 0 auto;
background-color: #46696b;
overflow: hidden;
}
.right_click_map_out, .right_click_map, .right_click_robot, .right_click_point {
display: none;
100px;
border- 1px 1px 0 1px;
border-style: solid;
border-color: black;
background-color: rgba(242, 242, 242, 1);
border-radius: 4px;
position: fixed;
left: 0;
top: 0;
}
.right_click_map_out ul {
list-style: none;
cursor: pointer;
}
.right_click_map_out ul li {
text-align: center;
height: 31px;
line-height: 31px;
border-bottom: 1px solid #666;
}
.right_click_map ul {
list-style: none;
cursor: pointer;
}
.right_click_map ul li {
text-align: center;
height: 31px;
line-height: 31px;
border-bottom: 1px solid #666;
}
.right_click_robot ul {
list-style: none;
cursor: pointer;
}
.right_click_robot ul li {
text-align: center;
height: 31px;
line-height: 31px;
border-bottom: 1px solid #666;
}
.right_click_point ul {
list-style: none;
cursor: pointer;
}
.right_click_point ul li {
text-align: center;
height: 31px;
line-height: 31px;
border-bottom: 1px solid #666;
}
#test_map {
text-align: center;
position: absolute;
border: solid #ffe238;
border-radius: 20px;
top: 25%;
left: 25%;
50%;
height: 50%;
background-color: #ffe238;
}
#test_robot {
position: absolute;
top: 50%;
left: 45%;
}
.point {
display: inline-block;
border: solid blue 5px;
border-radius: 5px;
margin-left: 40px;
margin-top: 30px;
cursor: pointer;
}
.db_click_point {
display: none;
background-color: #6bf5ce;
400px;
height: 200px;
border-radius: 10px;
position: absolute;
left: 35%;
top: 20%;
}
.db_click_point ul {
list-style: none;
}
.db_click_point ul li {
text-align: center;
height: 31px;
line-height: 31px;
border-bottom: 1px solid #666;
}
</style>
</head>
<body onselectstart="return false">
<div id="box">
<p style="text-align: center">模拟地图外界</p>
<div id="test_map">
<p>模拟地图</p>
<div class="point" style="margin-left: 0" num="1"></div>
<div class="point" num="2"></div>
<div class="point" num="3"></div>
<div class="point" num="4"></div>
<div class="point" num="5"></div>
<div class="point" num="6"></div>
<div class="point" num="7"></div>
<img src="./robot.png" alt="机器人" id="test_robot">
</div>
<div class="right_click_map_out" id="right_click_map_out">
<ul>
<li>寻找机器人</li>
<li>隐藏机器人</li>
</ul>
</div>
<div class="right_click_map" id="right_click_map">
<ul>
<li>设置定位</li>
<li>寻找机器人</li>
<li>隐藏机器人</li>
</ul>
</div>
<div class="right_click_robot" id="right_click_robot">
<ul>
<li>取消任务</li>
<li>一键返航</li>
<li>返回充电</li>
<li>隐藏机器人</li>
<li>显示机器人</li>
<li>查看任务</li>
</ul>
</div>
<div class="right_click_point" id="right_click_point">
<ul>
<li>发布任务</li>
<li>设备窗口</li>
</ul>
</div>
</div>
<div class="db_click_point" id="db_click_point">
<ul>
<li><span id="close_detail" style="float:right;cursor: pointer;margin-right: 10px;">X</span></li>
<li>设备详情页</li>
<li>设备名称：<span id="title">...</span></li>
</ul>
</div>
<script type="text/javascript">
var preventDefault = function (ev) {
// 取消默认的右键菜单
ev.returnValue = false;
ev.preventDefault();
if (document.all) {
ev.cancelBubble = true; // ie阻止事件流
} else {
ev.stopPropagation(); // w3c阻止事件流
}
};
window.oncontextmenu = preventDefault;
// 获取地图外界的盒子
var box = document.getElementById("box");
box.oncontextmenu = function (ev) {
// var ev = window.event || e;
// 获取鼠标当前的位置
var client_x = ev.clientX;
var client_y = ev.clientY;
// 获取需要显示的右键菜单，并且设置左上角的坐标为当前鼠标位置
var right_click_map_out = document.getElementById("right_click_map_out");
right_click_map_out.style.display = "block";
right_click_map_out.style.left = client_x + "px";
right_click_map_out.style.top = client_y + "px";
};
var test_map = document.getElementById("test_map");
test_map.oncontextmenu = function (ev) {
// 获取鼠标当前的位置
var client_x = ev.clientX;
var client_y = ev.clientY;
// 获取需要显示的右键菜单，并且设置左上角的坐标为当前鼠标位置
var right_click_map = document.getElementById("right_click_map");
right_click_map.style.display = "block";
right_click_map.style.left = client_x + "px";
right_click_map.style.top = client_y + "px";
};
var test_robot = document.getElementById("test_robot");
test_robot.oncontextmenu = function (ev) {
// 获取鼠标当前的位置
var client_x = ev.clientX;
var client_y = ev.clientY;
// 获取需要显示的右键菜单，并且设置左上角的坐标为当前鼠标位置
var right_click_robot = document.getElementById("right_click_robot");
right_click_robot.style.display = "block";
right_click_robot.style.left = client_x + "px";
right_click_robot.style.top = client_y + "px";
};
document.body.onmousedown = function () {
// 在任何位置点击鼠标，将右键菜单隐藏
document.getElementById("right_click_map_out").style.display = "none";
document.getElementById("right_click_map").style.display = "none";
document.getElementById("right_click_robot").style.display = "none";
document.getElementById("right_click_point").style.display = "none";
};
document.getElementById("right_click_map_out").onmousedown = preventDefault;
document.getElementById("right_click_map_out").oncontextmenu = preventDefault;
document.getElementById("right_click_map").onmousedown = preventDefault;
document.getElementById("right_click_map").oncontextmenu = preventDefault;
document.getElementById("right_click_robot").onmousedown = preventDefault;
document.getElementById("right_click_robot").oncontextmenu = preventDefault;
document.getElementById("right_click_point").onmousedown = preventDefault;
document.getElementById("right_click_point").oncontextmenu = preventDefault;
var params = {
zoomVal: 1, // 缩放倍率
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
box.onwheel = function (event) {
params.zoomVal += event.wheelDelta / 1200;
if (params.zoomVal >= 0.2) {
// transform：对元素进行旋转、缩放、移动或倾斜
// scale：缩放
test_map.style.transform = "scale(" + params.zoomVal + ")";
} else {
// 这里限制了最小的缩小倍数
params.zoomVal = 0.2;
test_map.style.transform = "scale(" + params.zoomVal + ")";
return false;
}
};
// 获取相关CSS属性
var getCss = function (o, key) {
return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
};
// 拖拽的实现
var startDrag = function (bar, target, callback) {
// 获取现在的位置
if (getCss(target, "left") !== "auto") {
params.left = getCss(target, "left");
}
if (getCss(target, "top") !== "auto") {
params.top = getCss(target, "top");
}
bar.onmousedown = function (event) {
// 鼠标落下 左键 右键 滚轮键
params.flag = true; // 设置为可移动状态
if (!event) {
event = window.event;
// 防止IE文字选中
bar.onselectstart = function () {
return false;
}
}
var e = event;
// 获取点击时对应的鼠标坐标值
params.currentX = e.clientX;
params.currentY = e.clientY;
};
document.onmouseup = function () {
// 鼠标放开
params.flag = false; // 设置为不可移动状态
// 将现在的位置记录下来
if (getCss(target, "left") !== "auto") {
params.left = getCss(target, "left");
}
if (getCss(target, "top") !== "auto") {
params.top = getCss(target, "top");
}
};
document.onmousemove = function (event) {
// 鼠标移动的状态 并且是可移动状态
var e = event ? event : window.event;
if (params.flag) {
// 计算出鼠标按下到移动过程中的鼠标相对位移
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
// 不要执行与事件关联的默认动作
if (event.preventDefault) {
event.preventDefault();
}
}
};
};
startDrag(box, test_map);
var points = document.getElementsByClassName("point");
var db_click_point = document.getElementById("db_click_point");
for (let i = 0; i < points.length; i++) {
points[i].oncontextmenu = function (ev) {
// 获取鼠标当前的位置
var client_x = ev.clientX;
var client_y = ev.clientY;
// 获取需要显示的右键菜单，并且设置左上角的坐标为当前鼠标位置
var right_click_point = document.getElementById("right_click_point");
right_click_point.style.display = "block";
right_click_point.style.left = client_x + "px";
right_click_point.style.top = client_y + "px";
};
points[i].ondblclick = function (ev) {
db_click_point.style.display = "block";
document.getElementById("title").innerText = "测试" + this.getAttribute("num") + "号";
}
}
var close_detail = document.getElementById("close_detail");
close_detail.onclick = function (ev) {
db_click_point.style.display = "none";
}
</script>
</body>
</html>