jquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData() doesn't work

Question

chrome throw err: Cannot call method 'setData' of undefined, I find the e is not equal to window.event(it havn't propert dataTransfer);both has very big different

I find both almost equal in the click event.

I used http://code.jquery.com/jquery-latest.js.

I don't use drag feature,I just want know why. it is new feature in html 5,jquery still behind of it ?. or jquery team don't want support it?? or some other reason

Answer 1

In the callback function you get a jQuery wrapper over a native event. Use the originalEvent property of passed argument:

$('...').on('dragstart', function (event) {
    event.originalEvent.dataTransfer.setData('...', '...');
});

P.S. dont' forget to set the draggable="true" attribute for the element to be dragged.

Answer 2

jQuery creates it's own event object, and it doesn't have a dataTransfer property yet. This adds dataTransfer to the event object.

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