title: Html5 drag and drop on svg element
body: <p>I am trying to follow the html5 drag and drop tutorial <a href="http://www.html5rocks.com/tutorials/dnd/basics/" rel="noreferrer">here</a>. I could not get the <code>dragstart</code> event to be registered on <code>rect</code> element. If I change the event from <code>draggable</code> to <code>mousedown</code> it calls the <code>handleDragStart</code> handler. Please ignore the additional blank registration in the code.</p>
  
  <p>JSFiddle <a href="http://jsfiddle.net/YNReB/" rel="noreferrer">here</a></p>
  
  <hr>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;&lt;head&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;style type="text/css" media="screen"&gt;
      svg rect { cursor: move; }
    &lt;/style&gt;
  &lt;/head&gt;&lt;body&gt;
    &lt;h1&gt;SVG/HTML 5 Example&lt;/h1&gt;
    &lt;svg id="cvs"&gt;
      &lt;rect draggable="true" x="0" y="10" width="100" height="80" fill="#69c" /&gt;
      &lt;rect x="50" y="50" width="90" height="50" fill="#c66" /&gt;        
    &lt;/svg&gt;
    &lt;script type="text/javascript" src="loc.js"&gt;&lt;/script&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p><strong>loc.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {    
      function handleDragStart(e) {
          log("handleDragStart");                
            this.style.opacity = '0.4';  // this ==&gt; e.target is the source node.
      };
  
      var registercb = function () {
              $("#cvs &gt; rect").each(function() {
                    $(this).attr('draggable', 'true');
                });
              $("#cvs &gt; rect").bind('dragstart', handleDragStart);    
              $(window).mousedown(function (e) {        
  
              });    
              $(window).mousemove(function (e) {                
              });
              $(window).mouseup(function (e) {
                  log("mouseup");                
              });
          };
  
      function log() {
        if (window.console &amp;&amp; window.console.log)
          window.console.log('[XXX] ' + Array.prototype.join.call(arguments, ' '));
      };
  
      registercb();
  }); 
  </code></pre>