title: Bind native html5 dragstart event handler and access dataTransfer using jQuery
body: <p><strong>This is working:</strong></p>
  
  <pre><code>$(".my_dragging_class").each( makeDraggable($(this).get()[0]) );
  
  var makeDraggable = function (el){
      el.draggable = 'true';
      el.addEventListener('dragstart', function(e){
                  e.dataTransfer.effectAllowed = 'move';
                  e.dataTransfer.setData('text/html', 'test');
                  console.log('dragstart');
                  }, 
              false);
  }
  </code></pre>
  
  <p><strong>This is NOT working:</strong></p>
  
  <pre><code>$(".my_dragging_class").makeDraggable();
  
  $.fn.makeDraggable(){
      $(this).attr('draggable','true');
      $(this).bind('dragstart', function(e){
                  e.dataTransfer.effectAllowed = 'move';
                  e.dataTransfer.setData('text/html', 'test');
                  console.log('dragstart');
                  }, 
              false);
  }
  </code></pre>
  
  <p><strong>Error message:</strong> I receive a <em>'e.dataTransfer is undefined'</em> for the line <code>e.dataTransfer.effectAllowed = 'move';</code>. My Browser is FireFox 10.0.2</p>
  
  <p>Is it possible to use dataTransfer with jQuery this way?</p>