1

主に画像などのHTML要素をクリックして、それらの「シャドウバージョン」を画面にドラッグする方法を知っていますか？

スタックオーバーフローのロゴを見たいですか？クリックしてドラッグすると、暗いバージョンを画面上で移動できます。

だから私の質問は、HTML要素、主に画像のドラッグを削除する方法はありますか？

4

2 に答える 2

6

これはブラウザの機能です。これは、ローカルハードドライブへの画像の保存を簡単にするためのショートカットです。この動作を修正または回避するには、次の3つの方法があります。

  • 最良の方法は、画像を同じ幅と高さの画像に置き換え、divbackground-imageプロパティを目的の画像に設定することです。背景はドラッグできないので、これはあなたが望むことを正確に行います。ボーナスポイントについては、divのスタイルを設定して、display: inline-block;画像の動作をより厳密に模倣します。

  • 次善の策は、画像と同じサイズの透明部分 divを作成し、絶対位置とz-indexを使用して画像の上に配置することです。これは維持するのが面倒ですが、レイアウトに実装する方が簡単な場合があります。

  • 最後のオプションは最悪です。次のJavaScriptをページのどこかに追加するだけです。

    document.getElementById('my-image').ondragstart = function() { return false; };

...「my-image」を画像要素のIDに変更すると、完了です。ただし、このオプションは、すべてのブラウザで有効になっているわけではないJavascriptに依存しているため、お勧めできません。

脚注として、画像が保存されないようにしようとしている場合は、気にしないでください。クライアント側の保護の有無にかかわらず、画像を取得するのは簡単です。

于 2012-09-14T19:51:48.713 に答える
1

user-select仮に、CSSプロパティを使用してこれを実行できるはずです。ただし、ブラウザによるサポートは制限されており、不規則です。私のテストでは、テキストを選択したように見えることはありませんが、画像のドラッグを防ぐことはできません。今のところ、上記のように、background-imagesを使用するなどの回避策を使用する必要があります。

FWIW、以下を適用して本文内のすべてのテキストアイテムの選択可能性を削除するか、特定のセレクターで選択的に使用して、特定の要素の選択/ドラッグを無効にします。

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
于 2012-09-14T19:57:46.217 に答える