ドラッグ アンド ドロップ用のクロスブラウザー CSS カーソルを実装するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-11-06 03:11:02
オリジナル
252 人が閲覧しました

How to Implement Cross-Browser CSS Cursors for Drag and Drop?

ドラッグ アンド ドロップ用のクロスブラウザ 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート