右键拖动？答案

【问题标题】：Right Click Drag?右键拖动？
【发布时间】：2017-02-20 04:56:34
【问题描述】：

有没有办法让我的网站能够通过右键单击按钮来拖动 DOM 元素？根据this 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 稳定版。）

【问题讨论】：

你得到这个问题的答案了吗？

标签： javascript html drag-and-drop contextmenu

【解决方案1】：

我正在使用此代码并为我工作。
this 在左右两边都点击拖拽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>

【讨论】：