Right Click Drag?
Question
Is there a way to enable my site to drag a DOM element with the right-click button? 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. 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). 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.
Is there any way to allow elements to be dragged using the right mouse button?
(I'm using latest Chrome stable if that matters.)
1 answers
solution1
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.