Menu
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.)
250
Always use the right mouse button to drag and drop. That's it.
For example, to drag-and-drop an object, such as an icon, you first move your mouse cursor over it. Then, press and hold down the left mouse button, move the object to the location you desire, and release the mouse button to set it down.
"Clicking and dragging" is a way to move certain objects on the screen. To move an object, place the mouse cursor over it, press and hold down the left mouse button, then move the mouse while still holding down the left mouse button.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
