HTML5 Drag&Drop - Event handling with jQuery

Question

So I've stumbled upon this a several times and now I'm finally fed up with this topic. Searching and googleing about it confuses me every time and now I'll need to ask by myself here.

I'm up to implement native HTML5 drag&drop in a web app. It works fine in Chrome and in IE too (at least when I tried last time).

The problem now is, that event binding via jQuery wont work out properly in Firefox, whereas it does so in Chrome! This is my Code:

$(document).on('dragstart','.leistung', function(){
    cedamed.handlers.dragElement(event);
});

And this is my handler:

this.dragElement = function(event){
    var dataObj = {}; 
    dataObj.category = event.target.getAttribute('class');
    dataObj.description = event.target.getAttribute('description');
    dataObj.code0 = event.target.getAttribute('code0');
    dataObj.code1 = event.target.getAttribute('code1');
    dataObj.code2 = event.target.getAttribute('code2');
    event.dataTransfer.setData('Text',JSON.stringify(dataObj));
    console.log("dragging");
};

Works in Chrome, Firefox gives me the following error:

ReferenceError: event is not defined

It points to the line with:

cedamed.handlers.dragElement(event);

I have come across 'solutions' that involved the originalEvent-property of the event api, which is often supposed to make everything work fine in FF, but it does not at all in my case. I made it work by setting the 'ondragstart'-attribute directly in the HTML, but shouldnt it work with 'jQuery.on'?

I'm sorry, there are several questions to this topic out there, but I just dont get whats going wrong in this field. Can you please give me an insight, whats wrong in here?

Answer 1

I found out I have to pass 'event' as an argument to the jQuery callback function in 'on' such as:

$(document).on('dragstart','.leistung', function(event){
   cedamed.handlers.dragElement(event);
});

With usage of originalEvent in 'drageElement' I made it work finally. Sorry...