드래그 앤 드롭 - 포인터 이벤트를 사용하여 요소를 터치하십시오. 없음

Question

터치 및 마우스 이벤트를 사용하여 비 기본 드래그 앤 드롭을 실험하고 있습니다.

내가 취하는 접근법은 끌기 소스를 복제하고 복제본을 이동하는 것입니다. 모든 이벤트는 문서에 첨부됩니다. 복제본은 pointer-events: none의 CSS를 적용하여 복제본 아래의 요소가 복제 자체가 아닌 mousemove 또는 touchmove 이벤트의 대상으로 계산되도록합니다.

이 기능은 모든 데스크탑 브라우저 (마우스)에서 잘 작동하지만 단일 터치를 사용하여 ipad에서 테스트 할 때 효과가없는 것 같습니다. 즉 복제본이 항상 이벤트 대상으로 표시됩니다. 나는 공정한 금액을 찾기 위해 노력했는데, 그것이 가능하다고 믿게하지만 나는 결정적인 것을 보지 못했다. 도움이된다면

복제 된 요소는 다음과 같은 CSS를 가지고 :

.mirror { 
    position: fixed !important; 
    margin: 0 !important; 
    z-index: 999999 !important; 
    opacity: 0.8; 
    pointer-events: none !important; 
} 

감사합니다!

Answer 1

pointer-events: none은 터치 포인터로 작동하며, 같은 방식으로 작동하지 않습니다. 나는 event.target을 마우스 이벤트와 같은 방식으로 터치 포인터 아래의 항목을 신뢰할 수있게 나타낼 수 없었습니다.

위에서 언급 한 .mirror 요소에 pointer-events: none을 배치해도 작동하지만 기본 요소를 얻으려면 이벤트 좌표와 함께 document.elementFromPoint을 사용해야했습니다. 성능이 떨어지고 우아하지는 않지만 성능면에서 눈에 띄는 저하없이 작동합니다.

하나의 gotcha가 document.elementFromPoint 인 경우, 끝난 요소가 iframe 내에 있으면 iframe 요소가 다시 반환됩니다. 그런 다음 iframe의 문서를 가져 와서 elementFromPoint (iframe의 왼쪽 및 위쪽 오프셋 계산)을 호출해야합니다.

이 모든 것이 엉망진창처럼 보일 수도 있지만 다른 사람이 도움이되기를 바랍니다.