如何使用jQuery发布dragstart事件？

Question

我有一个这样的事件：

 $(document).on('dragstart', '#' + gridID + ' tr.rgRow, #' + gridID + ' tr.rgAltRow ', function (ev) { 
      console.log(ev); 
     }); 

我想发出一个dragstart事件，像这样：

$(".rgRow > td, .rgAltRow > td").filter(function() { 
    return $(this).text().trim() === "UTT000000899103"; 
}).parent().dragstart(); 

parent()找到正确tr，但dragstart是不确定的。那么，我应该如何继续呢？

编辑：基于由A.沃尔夫我试图.parent().trigger('dragstart')评论

，但我得到一个错误。现在，我尝试这样的：

$(document).on('dragstart', '#' + gridID + ' tr.rgRow, #' + gridID + ' tr.rgAltRow ', function (ev) { 
     console.log(ev); 
     var e = ev.originalEvent; 
     e.dataTransfer.effectAllowed = 'move'; 
    }); 

和

$(".rgRow > td, .rgAltRow > td").filter(function() { 
    return $(this).text().trim() === "UTT000000899103"; 
}).parent().trigger("dragstart"); 

但我得到一个错误，因为ev.originalEvent.dataTransfer是undefined。所以我想知道我应该如何定义originalEvent。

EDIT2：

我一直在试图与此代码：

$(".rgRow > td, .rgAltRow > td").filter(function() { 
    return $(this).text().trim() === "UTT000000899103"; 
}).parent()[0].dispatchEvent(new Event("dragstart")); 

返回true，但不运行在.on()定义的处理程序。

EDIT3：

我设法打电话dispatchEvent()将由处理器这样执行：

$(".rgRow > td, .rgAltRow > td").filter(function() { 
    return $(this).text().trim() === "UTT000000899103"; 
}).parent()[0].dispatchEvent(new CustomEvent("dragstart", { 
    bubbles: true, 
    dataTransfer: {} 
})); 

正是因为bubbles: true执行。但是，错误是：

Uncaught TypeError: Cannot set property 'effectAllowed' of undefined

EDIT4：

基于A.沃尔夫的评论我曾尝试这样的代码：

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); }); 

几乎解决了这个问题。难题的唯一缺少的部分是，我需要调用dataTransfer.setData的处理程序中是这样的：

  e.dataTransfer.setData('text', JSON.stringify(data)); 

其中data是一个初始化的JSON。

Answer 1

我已经解决了使用这种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; 
    } 

}; 

使用这个我可以叫getEvent，它返回一个特定类型或dispatchEvent的最后一场比赛，这将产生一定类型的新event和将派遣它。我有一个dragstart事件，它将使用setData将含有密钥'text'和某个JSON值的元素写入dataTransfer。实例：

    customEvent.dispatchEvent(woContext, "dragstart"); 
        techListWindow.dispatchEvent(selectedTech["Tech Name"], "drop", {key: "text", value: customEvent.getEvent("dragstart").dataTransfer.getData("text")}); 
        customEvent.dispatchEvent(woContext, "dragend"); 

其中woContext是一个jquery结果，techListWindow是iframe或一个单独的标签内，并且具有这样的功能：

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

它工作得很好。