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.
This is a known 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>