无法在包含嵌入 SVG 图像的 div 元素上执行 Shift + 拖动

Answer 1

这是 Chromium 中的一个已知错误，Firefox 工作正常

• https://bugs.chromium.org/p/chromium/issues/detail?id=982219

  • 如果元素有节点（除文本之外），则无法启动

    Shift-Drag

    操作

  • 如果您一键开始拖动，您可以在拖动过程中添加

    shift

    键

  • 如果您先单击“根”

    Textnode

    ，您可以 按住 Shift 键开始拖动
    （点击 SO 片段下面项目中的“标签”一词）

如果拖动 SVG 是您的目标，请阅读：https://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/

<script>
  function initDrag(tag, html = 'No HTML content') {
    document.body.appendChild(Object.assign(document.createElement(tag),{
      innerHTML : `tag:${tag} ` + html,
      ondrag : evt => LOG.innerHTML = `Shift ${evt.shiftKey?"On":"Off"} `
    })).setAttribute("draggable", "true");
  }

  let htmlContent = `<b style="color:red;font-size:20px">with HTML content</b>`;

  initDrag("h3");
  initDrag("h3", htmlContent);
  initDrag("div");
  initDrag("div", htmlContent);
</script>

<h2 id="LOG" style="background:lightgreen">[shift key state]</h2>