ドラッグ アンド ドロップ用のクロスブラウザ CSS カーソル
背景を取得する必要がある JavaScript Web アプリケーションのユーザー エクスペリエンスを向上させるため画面全体を移動するには、カーソルを変更してグラブアクションを示すことが重要です。 -moz-grab および -moz-grabbing CSS カーソルは Firefox に適していますが、他のブラウザでのサポートは制限されています。
クロスブラウザ ソリューション
幸いなことに、他のブラウザにも同等のカーソルがあります:
<code class="css">.grabbable { cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; }</code>
このコードは、「グラブ」カーソルがサポートされていない場合にフォールバックとして「移動」カーソルを適用し、その後に Firefox のベンダー固有のカーソル (-moz) を適用します。 -grab) および WebKit ブラウザー (-webkit-grab)。
グラブとグラビング
ドラッグ操作中により動的な視覚的なフィードバックを提供するには、オプションで「閉じた手」カーソルを適用します:
<code class="css">.grabbable:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; }</code>
このコードは、ユーザーが背景を積極的に掴むとカーソルを「掴む」状態に変更し、画面が移動していることを示します。
これらの CSS カーソルを実装すると、さまざまなブラウザ間で一貫した直感的なドラッグ アンド ドロップ エクスペリエンスを作成できます。
以上がドラッグ アンド ドロップ用のクロスブラウザー CSS カーソルを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。