- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个这样的事件:
$(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/
chrome 抛出错误:无法调用未定义的方法“setData”,我发现 e 不等于 window.event(它没有 propert dataTransfer);两者有很大的不同 我发现两者在点击事件
dragstart 事件未在 Chrome 浏览器上触发...我想在鼠标拖动事件上将状态设置为 true。所以我将 document.addeventlistener('dragstart', thi
我正在尝试创建一个列表,可以通过拖动其中的项目来重新排序。 当我第一次拖动元素时 dragstart.trigger="drag($event)"调用 drag(e) .在 drag(e)我设置拖动元
下面是我的代码: var
我想知道如何在 Dragstart 事件中首先存储和检索元素的坐标(offest)。 我正在使用interact.js,但这是一个普遍问题...... 到目前为止,我编写了这个函数,因为我想我必须使用
我正在开发“Windows 应用商店”应用程序。我希望能够拖动一个按钮来在网格单元格中设置一个值。这是按钮的声明: 下面是事件处理程序的代码: private void dragSt
所以我添加了sortablejs给我的blazor应用程序,它的工作原理 - 第一次拖放。 首先,这是发生了什么: Blazor 组件代码: @foreach (var m in manuf
我正在尝试使用 d3 制作一个可拖动的圆圈,但会保留原始圆圈的副本。这是圆圈: g.selectAll('circle') .data([{ cx: 90, cy: 80,
我试图在拖动开始后将光标更改为“移动”。我尝试将 dropEffect 属性设置为 move 但这不起作用。 https://developer.mozilla.org/en-US/docs/Web/
我有一个 super 简单的 hammer.js 示例,它适用于“tap”事件,但不适用于“dragstart”。我似乎无法弄清楚为什么。 HIT ME - var element = documen
我正在处理以下格式的 html: div1 div2 当我将鼠标放在第一个 div 上时,鼠标悬停事件的目标是该 div,但是当我拖动该 div 时,目标成为整个标签。有没有办法将拖动目标
我想在页面上实现一些可拖动的元素,这些元素不应该破坏页面上当前获得焦点的控件。这就是我的尝试: $('input').focus(); $('div').on('mousedown', functio
我目前正在尝试加快我的移动设备网络应用程序的速度,但现在我陷入了最重要的部分——缓存。如何在用户开始拖动之前缓存整个图层并在拖动 Action 停止时将其恢复为可用的 Kinetic.Nodes? 目
从 MDN 文档我可以读到: Drag - Fired when an element or text selection is being dragged. Dragstart - Fired wh
我想让一个 img 元素不可选择且不可拖动,因为我将它用作窗口大小调整控件(单击并拖动周围的 div 可调整窗口大小)。 它工作得很好,如下所示: noSelect[x].ondragstart =
我正在尝试触发 Slider Thumb.DragStarted使用 MVVMLight 的事件 EventToCommand但它不起作用。同样的事情对于 Slider Event ValueChan
当尝试在我的 ResponsiveGridLayout 中拖动或调整任何面板的大小时,我收到以下错误: not mounted on DragStart!这是我的 GridLayout: handl
我尝试阻止浏览器默认图像在dragstart中拖动,但不知何故它也禁用了drag和dragend事件。无论如何,我可以禁用浏览器默认图像拖动,但它仍然会运行拖动和拖动结束事件? 或者唯一的选择是使用背
我正在尝试实现拖放来更改文章调度系统中的日期。我希望用户能够将一篇文章条目从一个日期拖到另一个日期,然后时间表应该自动更新。这是我的代码: $(function () { $
我想根据拖动 slider 的程度来更改视频位置。所以我想使用 DragStarted 和 DragCompleted 事件。但它显示“本地属性‘Dragstarted’只能应用于从‘Thumb’派生
我是一名优秀的程序员,十分优秀!