gpt4 book ai didi

javascript - 如何使用 jQuery 发出 Dragstart 事件?

转载 作者:行者123 更新时间:2023-11-27 22:30:26 25 4
gpt4 key购买 nike

我有一个这样的事件:

        $(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未定义。所以我想知道应该如何定义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而执行。但是,错误是:

Uncaught TypeError: Cannot set property 'effectAllowed' of undefined

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

其中data是初始化的JSON。

最佳答案

我已经使用这个函数解决了我的问题:

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,它将生成一个新的事件某种类型并将分派(dispatch)它。我有一个 dragstart 事件,它将使用 将带有键 '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);
}

效果很好。

关于javascript - 如何使用 jQuery 发出 Dragstart 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39640050/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com