JS实现右键拖动元素

最近做一个绘图的应用,需要用右键来拖动画布的父节点,网上的例子一般是左键拖动,我稍微改了一下,使用右键拖动,拖动前需要屏蔽右键触发上下文菜单:

//需要拖动的块
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);

 

你可能感兴趣的:(JS.网页显示)