在画布上使用Dojo DND时在Chrome中获取xy坐标时出现问题

niknxzdl  于 2022-12-08  发布在  Dojo
关注(0)|答案(1)|浏览(284)

我有一个使用Dojo框架的项目(1.12.1)和JQuery之间的关系(2.1.4).我正在使用Dojo免打扰(拖放)功能,但我需要找到一个XY偏移到画布元素,这是一个DND目标在放下。我可以使用一个JQuery的鼠标释放事件来收集偏移在Firefox,Safari和它确实在Chrome 51.0.2704.84工作,但这对我来说在Chrome 56. 0. 2924. 87、IE或触摸屏(平板电脑、手机)上不起作用。
我需要找到一种方法来获取画布目标中的XY坐标,以便在Chrome和Firefox中进行拖放操作。我不知道我是否忽略了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');
});
qmelpv7a

qmelpv7a1#

最近版本的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上测试过它,所以您可能需要根据浏览器检测设置处理程序。

相关问题