Enlazar controlador nativo HTML5 dragstart evento y el acceso dataTransfer usando jQuery

Question

Esto está funcionando:

$(".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); 
} 

Esto no está funcionando: Mensaje de

$(".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); 
} 

error: que reciben un 'e.dataTransfer no está definido' para la línea e.dataTransfer.effectAllowed = 'move';. Mi navegador es FireFox 10.0.2

¿Es posible usar dataTransfer con jQuery de esta manera?

Answer 1

Probar:

$.fn.makeDraggable(){ 
    $(this).attr('draggable','true'); 
    $(this).bind('dragstart', function(e){ 
       e.originalEvent.dataTransfer.effectAllowed = 'move'; 
       e.originalEvent.dataTransfer.setData('text/html', 'test'); 
       console.log('dragstart'); 
       }, 
      false); 
} 

El jQuery event object no tiene una propiedad dataTransfer.

Answer 2

El jQuery event object no tiene dataTransfer propiedad ... cierto, pero se puede intentar:

jQuery.event.props.push('dataTransfer'); 

KR, zara