ブラウザ間で一貫したドラッグ アンド ドロップ カーソルの動作を実現するにはどうすればよいですか?

ブラウザ間でのドラッグ アンド ドロップ互換性のための CSS カーソル

画面上で要素をドラッグ アンド ドロップする JavaScript Web アプリケーションを設計する場合、ドラッグ可能なオブジェクトの上にマウスを置いたときにカーソルが適切に変化するようにするために不可欠です。 Mozilla の Firefox ブラウザは、この目的のために専用の CSS カーソル (-moz-grab および -moz-grabbing) を提供します。

ただし、これらのカーソルは Firefox 専用です。異なるブラウザ間で一貫したユーザー エクスペリエンスを提供するには、代替手段を検討する必要があります。

簡単な解決策は、標準の「移動」カーソルをフォールバックとして使用し、それを -webkit-grab および -moz と組み合わせることです。 -カーソルを取得します。これにより、すべてのブラウザのユーザーが要素をドラッグして移動しようとしているときに、適切なカーソルが表示されるようになります。さらに、オプションで -moz-grabbing カーソルと -webkit-grabbing カーソルを含めて、ドラッグ操作中に「閉じた手」カーソルを表示できます。

次のコード スニペットは実装を示しています。

<code class="CSS">.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}</code>

以上がブラウザ間で一貫したドラッグ アンド ドロップ カーソルの動作を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。