如何使用jQuery发布dragstart事件

How to issue a dragstart event with jQuery?

本文关键字：dragstart 事件 发布 jQuery 何使用      更新时间：2023-09-26

我有一个类似的事件：

        $(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.Wolff的评论，我尝试过.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。

第2版：

我一直在尝试这个代码：

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

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

第3版：

我已经成功地调用了dispatchEvent()，它将由如下处理程序执行：

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

由于bubbles: true而被执行。然而，错误是：

未捕获的类型错误：无法设置未定义的属性"effectAllowed">

第4版：

根据A.Wolff的评论，我尝试了这个代码：

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

其中CCD_ 14是初始化的JSON。

我已经用这个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);
}

它运行良好。

相关文章：