javascript - How to issue a dragstart event with jQuery? -

i have event this:

        $(document).on('dragstart', '#' + gridid + ' tr.rgrow, #' + gridid + ' tr.rgaltrow ', function (ev) {             console.log(ev);         }); 

i issue dragstart event, this:

$(".rgrow > td, .rgaltrow > td").filter(function() {     return $(this).text().trim() === "utt000000899103"; }).parent().dragstart(); 

parent() finds right tr, dragstart undefined. so, how should proceed instead?

edit:

based on comment a. wolff have tried .parent().trigger('dragstart') error. try this:

    $(document).on('dragstart', '#' + gridid + ' tr.rgrow, #' + gridid + ' tr.rgaltrow ', function (ev) {         console.log(ev);         var e = ev.originalevent;         e.datatransfer.effectallowed = 'move';     }); 

and

$(".rgrow > td, .rgaltrow > td").filter(function() {     return $(this).text().trim() === "utt000000899103"; }).parent().trigger("dragstart"); 

but error, ev.originalevent.datatransfer undefined. wonder how should define originalevent.

edit2:

i have been trying code:

$(".rgrow > td, .rgaltrow > td").filter(function() {     return $(this).text().trim() === "utt000000899103"; }).parent()[0].dispatchevent(new event("dragstart")); 

it returns true, not run handler defined in .on().

edit3:

i have managed call dispatchevent() executed handler this:

$(".rgrow > td, .rgaltrow > td").filter(function() {     return $(this).text().trim() === "utt000000899103"; }).parent()[0].dispatchevent(new customevent("dragstart", {     bubbles: true,     datatransfer: {} })); 

it executed because of bubbles: true. however, error is:

uncaught typeerror: cannot set property 'effectallowed' of undefined

edit4:

based on a. wolff's comment have tried code:

var dragevent = document.createevent("htmlevents"); dragevent.initevent("dragstart", true, true);  dragevent = $.extend(dragevent, {datatransfer: {effectallowed: null}});  $(".rgrow > td, .rgaltrow > td").filter(function() { return $(this).text().trim() === "utt000000899103"; }).parent().each(function(){ this.dispatchevent(dragevent); }); 

which solves problem. missing piece of puzzle need call datatransfer.setdata inside handler this:

            e.datatransfer.setdata('text', json.stringify(data)); 

where data initialized json.

i have solved problem using function:

tt.customevent = function () {     var me = this;     var overridemode = false;     var customevents = [];     this.getevent = function(type, data) {         if ((!customevents[type]) || (overridemode)) {             var event = document.createevent("htmlevents");             event.initevent(type, true, true);             event = $.extend(event, {                 datatransfer: {                     effectallowed: null,                     setdata: function (key, value) {                         if (!event.data) {                             event.data = {};                         }                         event.data[key] = value;                     },                     getdata: function (key) {                         if (event.data) {                             return event.data[key];                         }                     }                 }             });             customevents[type] = event;         }         if (data) {             customevents[type].datatransfer.setdata(data.key, data.value);         }         return customevents[type];     }      this.dispatchevent = function (target, event, data) {         overridemode = true;         var currentevent = me.getevent(event, data);         target.each(function () {             this.dispatchevent(me.getevent(event, data));         });         overridemode = false;     }  }; 

using can call getevent, returns last event of type or dispatchevent, generate new event of type , dispatch it. have dragstart event, write element key 'text' , value of json datatransfer, using setdata. example usage:

                    customevent.dispatchevent(wocontext, "dragstart");                     techlistwindow.dispatchevent(selectedtech["tech name"], "drop", {key: "text", value: customevent.getevent("dragstart").datatransfer.getdata("text")});                     customevent.dispatchevent(wocontext, "dragend"); 

where wocontext jquery result, techlistwindow inside iframe or separate tab , has function this:

function dispatchevent(target, event, data) {     customevent.dispatchevent($("#techtable .row .tooltip-link").filter(function() {         return $(this).text().trim() === target.trim();      }).parent(), event, data); } 

it works well.