Estoy construyendo un editor que usa un elemento SVG como lienzo. Proporciona un comportamiento personalizado de arrastrar y soltar para arrastrar elementos dentro del svg. Sin embargo, cuando trato de arrastrar una etiqueta <image> , se activa el comportamiento de arrastre nativo del navegador donde está arrastrando un "fantasma" de la imagen. ¿Cómo lo detengo?
Intenté configurar user-select: none en CSS, lo que impide seleccionar texto pero no arrastrar la imagen. Intenté configurar la propiedad HTML draggable="false" , que no tiene ningún efecto en SVG. Incluso intenté cancelar el evento ondragstart , que no parece activarse en absoluto.
<svg> <image draggable="false" style="user-select: none;" ondragstart="return false" href="https://wehles.files.wordpress.com/2020/05/opamp.png?w=147"></image> </svg>JSfiddle: https://jsfiddle.net/1dnfpray/
¿Cómo evito que se arrastre la imagen para poder implementar mi propio comportamiento de arrastre?
Si cancela el evento mousedown , se evita el arrastre:
<svg> <image draggable="false" style="user-select: none;" onmousedown="return false" href="https://wehles.files.wordpress.com/2020/05/opamp.png?w=147"></image> </svg>Deberá manejar ese evento de todos modos, si desea implementar su propio comportamiento de arrastre.