1

カスタムコードを使用して、その中にドラッグ可能なフォルダーとファイルを含むファイルツリーがあります（バックボーンを使用しますが、これは無関係です）。アイテムをドラッグすると、アイテムが選択されたことを示すために、ドラッグ要素をマウスカーソルに「貼り付け」ます。

ただし、アイテムをドラッグしている間、ツリー内の他のファイルやフォルダーでマウスイベントをトリガーできるようにしたい (私の場合は .ここでの問題は、カーソルの下の要素がドラッグされていることですmouseenter。mouseleaveつまり、他のマウス イベントはトリガーされません。

DOM の残りの部分でマウス イベントが引き続きトリガーされるように、カーソルでドラッグしている要素を「透視」するにはどうすればよいですか?

4

1 に答える 1

2

非常に優れた解決策は、CSS で疑似要素を使用することです。他の解決策は、要素の次元のキャッシュを保持し、座標の一致を行うことを提案していますが、これは面倒でエラーが発生しやすいです。要素が移動するとどうなりますか？また、かなり遅いです。

私の解決策は、(別の要素をドラッグしているときに) マウス イベントをトリガーする各要素:afterに、要素の寸法を含むプロパティを与えることです。

これはJSBinのデモンストレーションです。

（基本）CSS

.dragging {
    position: fixed;
    z-index: 1;
}

.drop-target {
    position: relative;
}

.drop-target:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

きちんとしたビットは、 の を、カーソルによってドラッグされている要素よりも 1 つ高く設定z-indexすること:afterです。これは、ドラッグされている要素の上にある (透明な) 疑似要素の上にマウスが技術的にホバリングしているため、下層の要素でマウス イベントがトリガーされることを意味します。

ドラッグされた要素は:after実際の要素の下に移動しますが、表示と動作の両方が正しいことを意味します。

于 2013-04-25T20:35:02.923 に答える