Dojo DND를 캔버스에 사용할 때 Chrome에서 xy 좌표를 가져 오는 데 문제가 발생했습니다.

Dojo 프레임 워크 (1.12.1) 및 JQuery (2.1.4)를 사용하는 프로젝트가 있습니다. Dojo DND (끌기 및 놓기) 기능을 사용하고 있는데, 입니다. 캔버스 요소에 XY 오프셋을 찾아야합니다.이 위치는 DND 대상입니다. Firefox, Safari에서 오프셋을 수집하고 Chrome 51.0.2704.84, 에서 작동하지만 Chrome 56.0.2924.87, IE 또는 터치 스크린에서 나에게 작동하지 않는다는 이유로 마우스 업 이벤트에서 JQuery를 사용할 수 있습니다. (태블릿, 휴대 전화).Dojo DND를 캔버스에 사용할 때 Chrome에서 xy 좌표를 가져 오는 데 문제가 발생했습니다.

캔버스 내에서 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'); 
});

출처

2017-03-21 Diane Blackwood

읽기 [이 (http://grokbase.com/t/dojo/dojo-interest/12cdv8wsdt/get-mouse-xy-coordinates-from-a-dnd-source-after-the-drag-completes# 20121214361npfk388nnnxvkx71h1tngmm). 도움이 될 수도 있습니다. – Himanshu

Himanshu, 나는 그 스레드에서 Shane Green의 의견에주의를 기울이려고했다. 나는 "normalizeEvent"에 대한 코드를 JSFiddle의 mouseup 핸들러에 추가하려고 시도했다. 그 결과 "위치"변수는 "xy"변수가 비어있는 것처럼 최근 크롬에서는 비어있다. Green은 브라우저 호환성이 자신의 접근 방법에 문제가 될 수 있다는 점을 지적했으며, 자신이 옳았다 고 생각합니다. 내가 알 수있는 한, 링크 된 스레드는 여기에 대한 질문에 대한 대답을 가지고 있지 않습니다. –

최근의 버전을 통해 원하는 오프셋을 제공 멀리 이사를 " 마우스 업 ". 관련 이벤트가 이제 "포인터 업"입니다. JSFiddle에서이 문제를 테스트했으며 이제 Chrome에서 작동합니다. 이 처리기를 추가하십시오 :

$(document).on('pointerup', function(evt) { 
    console.log("pointerup evt", evt); 
    xy = [evt.originalEvent.offsetX, evt.originalEvent.offsetY];  
});

및 해당 오프셋이 console.log 출력에 표시되어야합니다. Firefox에서 테스트하지 않았으므로 브라우저 감지를 기반으로 핸들러를 설정해야합니다.

출처

2017-03-22 19:56:38

Dojo DND를 캔버스에 사용할 때 Chrome에서 xy 좌표를 가져 오는 데 문제가 발생했습니다.

답변

관련 문제