HTML5 ドラッグ アンド ドロップ (DnD): カーソルの変更 質問する

HTML5 ドラッグ アンド ドロップ (DnD): カーソルの変更 質問する

HTML5 でブラウザ クライアント領域に要素をドラッグしているときに、カーソルを任意のカーソルに変更するにはどうすればよいですか?

これまでのところ、ドラッグ中にデフォルトのカーソルを表示することしかできませんでした (ドロップがサポートされていない場合はカーソルなしを除く)。

私が話しているのは、以下のいずれについてもではありません。

  • event.dataTransfer.setDragImage()カーソルの横に画像を表示するために使用する

  • event.dataTransfer.dropEffectカーソルの横にコピーまたはリンクのシンボルを表示したり、カーソルをなしのシンボルに変更したりするには、を使用します。

  • Firefox では、 を使用しますevent.dataTransfer.mozCursor。これは、デフォルトのシステム動作を実行するか、矢印カーソルを表示することしかできないため、どちらも役に立ちません (また、主に Chrome をターゲットにしていますが、クロスブラウザのサポートが必要です)。

:hoverCSSやの使用:focus、JavaSscript のトリックなど、他の多くのトリックも試しましたが、すべて効果がありませんでした。

ご協力いただきありがとうございます。

ベストアンサー1

CSS のみのソリューションはこちらです!

element:hover:active {
cursor: type;
}

要素セレクターを要素がある場所に配置し、カーソルを指定するだけです。これはちょっとしたハックです。ドラッグは検出されず、ホバーとクリックが同時に検出されるだけだからです。

おすすめ記事