我有一个使用 Dojo 框架 (1.12.1) 的项目并且 jQuery (2.1.4)。我正在使用 Dojo DND(拖放)功能, 但我需要找到一个 Canvas 元素的 XY 偏移量,该元素是 DND 目标已掉落。我可以在鼠标松开事件上使用 JQuery 在 Firefox、Safari 中收集偏移量,它在 Chrome 51.0.2704.84 中确实有效, 但这对我来说在 Chrome 56.0.2924.87、IE 或触摸屏(平板电脑、手机)上不起作用。
我需要找到一种方法来获取 Canvas 内的 XY 坐标 拖放部分的目标至少在 Chrome 中为 以及火狐浏览器。我不知道我是否忽略了里面的一些东西 Dojo 可以做到这一点,或者在 JQuery 中,或者如果某些特定于浏览器的东西 必须完成。
我正在开发的应用程序位于 https://avida-ed.beacon-center.org/app/AvidaED.html
我有一个 JSFiddle 显示了问题:https://jsfiddle.net/56bcrk5s/5/
require(['dojo',
"dojo/dnd/Source",
"dojo/dnd/Target",
"dojo/dnd/Manager",
"dojo/domReady!"
], function(dojo, dndSource, dndTarget, dndManager)
{
var theList = new dndSource('theList', {
accept: ['b', 'v', 'd'],singular: true,
copyOnly: true, selfAccept: false
});
theList.insertNodes(false, [
{data: 'Rusty', type:['d']},
{data: 'Farli', type:['v']},
{data: 'Ritka', type:['v']},
{data: 'Beka', type:['d']}
]);
myTarget = new dndTarget('myTarget', {accept: ['d', 'v']});
var xy=[];
$(document).on('mouseup', function(evt) {
xy = [evt.offsetX, evt.offsetY];
});
myTarget.on('DndDrop', function (source, nodes, copy, target) {
if ('myTarget' == target.node.id) {
console.log(nodes[0].textContent,' at ', xy);
output.textContent = nodes[0].textContent
+' at ' + xy[0] +', '+xy[1];
}
});
console.log('dom is ready');
});
最佳答案
Chrome 的最新版本已经不再通过“mouseup”提供所需的偏移量。相关事件现在是“pointerup”。我已经在 JSFiddle 中对此进行了测试,现在它可以在 Chrome 中运行。添加此处理程序:
$(document).on('pointerup', function(evt) {
console.log("pointerup evt", evt);
xy = [evt.originalEvent.offsetX, evt.originalEvent.offsetY];
});
您应该会看到相关的偏移量出现在 console.log 输出中。我尚未使用 Firefox 对其进行测试,因此您可能需要根据浏览器检测设置处理程序。
关于javascript - 在 Canvas 上使用 Dojo DND 时,在 Chrome 中获取 xy 坐标时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42931214/