右键拖拽？
[英]Right Click Drag?
问题描述
有没有办法让我的网站通过右键单击按钮拖动 DOM 元素？ 根据此MDN 参考， drag事件具有buttons属性，左键单击为 1，右键单击为 2，两者均为 3。 所以我写了一些非常简单的测试：
data:text/html, <div id="draggable" draggable="true" ondrag="console.log(event.buttons)" oncontextmenu="return false">Drag This</div>
当我用左键拖动这个 div 时，它会在控制台上打印 1（重复，因为在拖动过程中ondrag事件不断触发）。 当我尝试使用右键拖动它时，没有任何反应 - 我无法拖动它。 当我开始用左键拖动它，然后按住左键和右键时，它会打印 3。如果我这样做然后松开左键并只按住右键，拖动会立即结束。
有没有办法允许使用鼠标右键拖动元素？
（如果重要的话，我正在使用最新的 Chrome 稳定版。）
1 个解决方案
解决方案1
2 2019-11-28 06:47:17
我正在使用此代码并为我工作。
这在左右都点击拖动div。
dragDiv.onmousedown = function(e) { var shiftX = e.clientX - dragDiv.getBoundingClientRect().left; var shiftY = e.clientY - dragDiv.getBoundingClientRect().top; dragDiv.style.position = 'absolute'; dragDiv.style.zIndex = 1000; document.body.append(dragDiv); moveDiv(e.pageX, e.pageY); function moveDiv(pageX, pageY) { dragDiv.style.left = pageX - shiftX + 'px'; dragDiv.style.top = pageY - shiftY + 'px'; } function onMouseMoveDiv(e) { moveDiv(e.pageX, e.pageY); } document.addEventListener('mousemove', onMouseMoveDiv); dragDiv.onmouseup = function() { document.removeEventListener('mousemove', onMouseMoveDiv); dragDiv.onmouseup = null; }; }; dragDiv.ondragstart = function() { return false; };
body { padding:10px; } #dragDiv { height:15px; width:15px; border:15px solid black; background:blue; }
<html> <head> <title>Drag Div using Right or Left Mouse Click.</title> </head> <body> <p>Drag Div using Right or Left Mouse Click.</p> <div id="dragDiv"></div> </body> </html>
谷歌风格右键单击并拖动
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.