title: Including an svg element in my html breaks jquery ui
body: <p>I am having a very weird issue that I have no idea whatsoever how to debug.
  I have a html file with a div that has the jquery UI draggable enabled:</p>
  
  <pre><code>$(function() {
      $(".ideanode").draggable({ containment: "parent" });
  });
  </code></pre>
  
  <p>this is working fine and dandy until I include this in my html:</p>
  
  <pre><code>&lt;svg id="connectors" height="100%" width="100%"&gt;
                  &lt;defs&gt;
                      &lt;marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
                             orient="auto"&gt;
                          &lt;path d="M2,2 L2,11 L10,6 L2,2" /&gt;
                      &lt;/marker&gt;
                  &lt;/defs&gt;
  
                  &lt;line x1="0" y1="0" x2="200" y2="100" class="arrow" /&gt;
                &lt;/svg&gt;
  </code></pre>
  
  <p>This just completely removes the draggable functionality of my div and I can't even begin to understand why. I will link to a full example as well.
  <a href="https://codepen.io/ricodon1000/pen/XWmqxeB" rel="nofollow noreferrer">https://codepen.io/ricodon1000/pen/XWmqxeB</a>
  If any additional information is needed please ask, I'm still learning how to post really good questions here. Thank you!</p>