Cannot read property 'setData' of undefined - jQuery UI Touch Punch

Question

I am unsure why setData and getData is undefined whenever I call it through jQuery UI.

I am doing

$(`#selector`).draggable({
            start: function(event: any) {
                drag(event);
            },
            stop: function(event: any) {
                console.log('stopped');
            }
        });

and in drag():

drag(event: any) {
    event.originalEvent.dataTransfer.setData("text, application/x-moz-node", event.target.id);
}

The originalEvent is in reference to this solution here

However, I am still receiving the same results.

Cannot read property 'setData' of undefined

I am using typescript as well (not sure how much of a difference this makes).

Answer 1

it’s an issue with jQuery and you can resolve it by adding the following code when the page loads or before using dataTransfer

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

Example:

jQuery.event.props.push('dataTransfer');
 event.dataTransfer.setData("Text", event.target.id);

Answer 2

This is because of the jQuery wrapper.We have to add 'dataTransfer' to Event object.

Note: $.event.props was removed in jQuery 3.0 so you will need to use $.event.addProp instead.

Example:

$(document).ready(function(){

    $.event.addProp('dataTransfer');

});