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

Question

我有一个可拖动的 div，其中包含一个嵌入式 SVG 图像，如下所示：

<div draggable="true">
  <svg width="160" height="40" xmlns="http://www.w3.org/2000/svg">
    <g>
      <text x="26.5" y="15" style="font-size: 20px;">Drag me</text>
    </g>
   </svg>
</div>

我可以拖动 div，我可以执行 Alt + 拖动，但是当我执行 Shift + 拖动时没有任何反应，显然根本没有调用拖动开始事件。如何使 Shift + 拖动起作用？

请注意，此处提到的错误：似乎已在最新版本的 Chrome 中得到修复，而我提到的问题仍然存在。

Answer 1

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

https://bugs.chromium.org/p/chromium/issues/detail?id=982219
- 如果元素有节点，则不能启动 Shift-Drag 操作，文本除外
- 如果一键开始拖动，可以在拖动过程中添加shift键
- 如果您先单击“根”Textnode，您可以按下 shift 键开始拖动
  （单击 SO 代码段下方项目中的单词 'tag'）

如果拖动 SVG 是您的 objective，请阅读：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>

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

Cannot perform Shift + Drag on a div element containing an embedded SVG image

javascript

svg

drag-and-drop