I have a draggable div containing an en embedded SVG image like this:

<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>

I can drag the div, I can do Alt Drag but when I perform a Shift Drag nothing happens, apparently the drag start event is not invoked at all. How can I make Shift Drag work?

Please note that the bug mentioned here: Draggable with shift key doesn't work in Chrome appears to be fixed in the latest version of Chrome while the problem I mention still occurs.

CodePudding user response：

This is a know bug in Chromium, Firefox works fine

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

  • You can not start a Shift-Drag operation if the Element has Nodes, other then text

  • If you start the drag with one click, you can add the shift key during the drag

  • If you click a "root" Textnode first, you can start dragging with the shift key down
    (click on the word 'tag' in the items below in the SO snippet)

If dragging SVGs is your objective, do read: 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>