현재 드래그 위치를 현재 프레임과 비교하여 어떻게 얻을 수 있습니까?

Question

나는 드래그로 실행 구글 크롬에서 문제를 드롭 :

foo.html을 :

<iframe style="position:absolute;left:300px" src="bar.html"></iframe> 

bar.html에는 :

<div draggable="true" id="bar">Drag me!</div> 
<script> 
    document.getElementById("bar").addEventListener("dragend", function(e) { 
     console.log(e.view === window); // false 
     console.log(e.view === window.parent); // true 
    }); 
</script> 

가 왜에 e 상대적입니다 현재 창 (예 : window 현재 프레임의 속성)이 아닌 부모 창 dragstart과 dragover은 모두 현재 프레임을 기준으로 view 속성을 가진 인수를 받는다는 것을 확인했습니다.

Here 님의 사파리 또는 크롬 문제를 재현합니다.

편집 : 내 테스트에서 프레임 외부로 드래그를 끝내지 않을 것입니다.

Answer 1

부모 창을 e.view에 저장하는 이유는 dragend가 iframe 외부에서 발생하기 때문입니다. iframe이 창과 관련된 상대 위치를 알고 싶다면 두 파일이 같은 서버에있는 한 그렇게 할 수 있으므로 부모 창을 보호하지 못하는 문제가 없습니다. 이것이 사실이라면, 당신은 다음을 수행 할 수 있습니다 :이 후

// get the iframes from the parent 
var iframes = window.parent.document.getElementsByTagName('iframe'); 
var iframe; 

// search through the iframes[] array and match your name 
for (var i = 0; i < iframes.length; i++) { 
    if (iframes[i].src == 'bar.html') { // note, you may have to parse this or add your full pathname 
     iframe = iframes[i]; 
     break; 
    } 
} 
// get the boundaries of the selected iframe 
var rect = iframes[i].getBoundingClientRect(); 

, 당신은 dragend 이벤트를 처리 할 때를, 다음을 수행하십시오 당신을 기준으로 x와 y 위치를 줄 것이다

if(e.view == window) { 
    xoff = e.clientX; 
    yoff = e.clientY; 
} 
else { 
    xoff = e.clientX - rect.left; 
    yoff = e.clientY - rect.top; 
} 

iframe

Answer 2

'ondragend'이벤트는 .... 이벤트가 iframe이 들어있는 활성 문서에 버블됩니다 iframe을 외부 트리거되는 경우

브라우저가 스크립트로 인해 보안의 다른 원점 프레임에 액세스하려고 차단

이유 ....

ondragstart 다음에 원하는 페이지를 렌더링 &을 발사 할 때 백엔드로의는 clientX을 게시 clientY로 값을 시도 aswell 백엔드에서 작업하는 경우이 thread

의 보안에 대한 유용한 정보 상대 포 dragend when fire ...