ドラッグアンドドロップ - ポインタイベントを使用して要素をタッチする：なし

Question

タッチとマウスのイベントを使用して非ネイティブドラッグアンドドロップを試しています。

私が取っているアプローチは、ドラッグ元をクローンしてクローンを移動することです。すべてのイベントは文書に添付されます。クローンは、pointer-events: noneのCSS適用を取得して、クローンの下のエレメントを、クローン自体ではなくmousemoveまたはtouchmoveイベントのイベントターゲットとして数えます。

これはすべてのデスクトップブラウザ（マウス）でうまくいきますが、ワンタッチでipadでテストすると効果がないようです。つまり、クローンは常にイベントターゲットとして表示されます。私はかなりの量を検索しようとしたが、それは可能だと信じるように導くが、私は決定的なものは何も見なかった。

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

感謝を：それは場合に役立ちます

クローン化された要素は、以下のCSSを持っています！

Answer 1

pointer-events: noneはタッチポインターで動作しますが、同じ方法ではありません。私は決してevent.targetを確実に得ることができず、マウスイベントでのタッチポインタの下の項目を表現していました。 .mirror要素にpointer-events: noneを置く

は、上記の作業を行いますが、私は、イベントが根底にある要素を取得する座標でdocument.elementFromPointを使用する必要がありました。パフォーマンスは劣り、エレガントではないようですが、パフォーマンスに顕著な低下はありません。

document.elementFromPointの場合、あなたが乗っている要素がiframe内にある場合、iframe要素が戻されます。 iframeのドキュメントを取得し、elementFromPoint（iframeの左と上のオフセットを考慮して）を呼び出す必要があります。

これはおそらく混乱した混乱のように見えますが、他の誰かが助けてくれることを願っています。