右键拖拽？
[英]Right Click Drag?
问题描述
Is there a way to enable my site to drag a DOM element with the right-click button?
有没有办法让我的网站通过右键单击按钮拖动 DOM 元素？ According to this MDN reference, the drag event has the buttons property which is 1 for left-click, 2 for right click, and 3 for both.根据此MDN 参考， drag事件具有buttons属性，左键单击为 1，右键单击为 2，两者均为 3。 So I wrote something really simple to test:所以我写了一些非常简单的测试：
data:text/html, <div id="draggable" draggable="true" ondrag="console.log(event.buttons)" oncontextmenu="return false">Drag This</div>
When I drag this div with the left button it prints 1 to the console (repeatedly as the ondrag event fires constantly while the drag is in progress).当我用左键拖动这个 div 时，它会在控制台上打印 1（重复，因为在拖动过程中ondrag事件不断触发）。 When I try to drag it with the right button, nothing happens- I cannot drag it.当我尝试使用右键拖动它时，没有任何反应 - 我无法拖动它。 When I start dragging it with the left button, then hold the left and right buttons, it prints 3. If I do this and then release the left button and hold only the right, the drag immediately ends.当我开始用左键拖动它，然后按住左键和右键时，它会打印 3。如果我这样做然后松开左键并只按住右键，拖动会立即结束。
Is there any way to allow elements to be dragged using the right mouse button?有没有办法允许使用鼠标右键拖动元素？
(I'm using latest Chrome stable if that matters.) （如果重要的话，我正在使用最新的 Chrome 稳定版。）
1 个解决方案
解决方案1
2 2019-11-28 06:47:17
I am Use this code and work for me.
this in right and left both click to drag 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.