Skip to content

How to prevent dragging of an element inside a ?

I am building an editor that uses an SVG element as the canvas. It provides custom drag-and-drop behavior to drag elements inside the svg around. However, when I try to drag an <image> tag, the native browser drag behavior where you’re dragging a “ghost” of the image kicks in. How do I stop it?

I tried setting user-select: none in CSS, which does prevent selecting text but not dragging the image. I tried setting the HTML draggable="false" property, which has no effect in SVG. I even tried to cancel the ondragstart event, which doesn’t seem to fire at all.

  <image draggable="false" style="user-select: none;" ondragstart="return false" href=""></image>


How do I prevent the image from being dragged, so that I can implement my own drag behavior?


If you cancel the mousedown event, the drag is prevented:

  <image draggable="false" style="user-select: none;" onmousedown="return false" href=""></image>

You’ll need to handle that event anyway, if you want to implement your own dragging behaviour.