title: How to prevent dragging of an <image> element inside a <svg>?
body: <p>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 <code>&lt;image&gt;</code> tag, the native browser drag behavior where you're dragging a &quot;ghost&quot; of the image kicks in. How do I stop it?</p>
  <p>I tried setting <code>user-select: none</code> in CSS, which does prevent selecting text but not dragging the image. I tried setting the HTML <code>draggable=&quot;false&quot;</code> property, which has no effect in SVG. I even tried to cancel the <code>ondragstart</code> event, which doesn't seem to fire at all.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
    &lt;image draggable="false" style="user-select: none;" ondragstart="return false" href="https://wehles.files.wordpress.com/2020/05/opamp.png?w=147"&gt;&lt;/image&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>JSfiddle: <a href="https://jsfiddle.net/1dnfpray/" rel="nofollow noreferrer">https://jsfiddle.net/1dnfpray/</a></p>
  <p>How do I prevent the image from being dragged, so that I can implement my own drag behavior?</p>