Tengo un div arrastrable que contiene una imagen SVG incrustada como esta:
<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>Puedo arrastrar el div, puedo hacer Alt + Arrastrar, pero cuando realizo Shift + Arrastrar, no sucede nada, aparentemente el evento de inicio de arrastre no se invoca en absoluto. ¿Cómo puedo hacer que Shift + Drag funcione?
Tenga en cuenta que el error mencionado aquí: Draggable with shift key does not work in Chrome parece estar solucionado en la última versión de Chrome, mientras que el problema que menciono aún ocurre.
Este es un error conocido en Chromium, Firefox funciona bien
https://bugs.chromium.org/p/chromium/issues/detail?id=982219
No puede iniciar una operación Shift-Drag si el elemento tiene nodos, además de texto
Si inicia el arrastre con un clic, puede agregar la shift durante el arrastre
Si primero hace clic en un Textnode de texto "raíz", puede comenzar a arrastrar con la tecla Mayús hacia abajo
(haga clic en la palabra 'etiqueta' en los elementos a continuación en el fragmento SO)
Si su objetivo es arrastrar SVG, lea: 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>