最近做一个绘图的应用,需要用右键来拖动画布的父节点,网上的例子一般是左键拖动,我稍微改了一下,使用右键拖动,拖动前需要屏蔽右键触发上下文菜单:
//需要拖动的块
<div id = "Container" style="position: absolute;left: 100px;top: 100px; height: 1000px;width: 1400px;box-shadow:0px 0px 10px 5px #383838;">
</div>
var drag = document.getElementById('Container');
//屏蔽此对象的右键菜单
drag.oncontextmenu = () => false;
let putDown = function (event) {
var event = event || window.event;
if(event.button != 2){return;}
drag.style.cursor = "move";
let offsetX = parseInt(drag.style.left); // x轴距离
let offsetY = parseInt(drag.style.top); // y轴距离
let innerX = event.clientX - offsetX; // 鼠标x轴距
let innerY = event.clientY - offsetY; // 鼠标y轴距
// 移动时显示边框
drag.style.borderStyle = "solid";
drag.style.borderColor = "white";
drag.style.borderWidth = "2px";
document.onmousemove = function (event) {
drag.style.left = event.clientX - innerX + "px";
drag.style.top = event.clientY - innerY + "px";
}
document.onmouseup = function () {
var event = event || window.event;
if(event.button != 2){return;}
document.onmousemove = null;
document.onmouseup = null;
drag.style.borderStyle = "";
drag.style.borderColor = "";
drag.style.borderWidth = "";
drag.style.cursor = "auto";
}
}
drag.addEventListener("mousedown", putDown, false);