ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML での画像のドラッグ アンド ドロップを防ぐにはどうすればよいですか?

HTML での画像のドラッグ アンド ドロップを防ぐにはどうすればよいですか?

Susan Sarandon
リリース: 2024-11-02 10:16:30
オリジナル
952 人が閲覧しました

How to Prevent Image Drag and Drop in HTML?

HTML での画像のドラッグ アンド ドロップを避ける

HTML ページに画像を表示したいが、ユーザーが画像をドラッグ アンド ドロップできないようにしたい場合それをドラッグして、さまざまな解決策を検討しましたが、役に立ちませんでした。この記事では、画像のドラッグを無効にして、制御を維持しながらサイズ変更できるようにする方法について説明します。

一意の ID またはクラスを使用して画像を識別するだけです。次に、イベント リスナーを「ondragstart」イベントに割り当てます。このイベント ハンドラー内で、ブラウザーのデフォルトのドラッグ アンド ドロップ動作を禁止するには、「false」を返します。バニラ JavaScript を使用した例を次に示します。

document.getElementById('my-image').ondragstart = function() { return false; };
ログイン後にコピー

また、jQuery を使用している場合は、次のコードを選択できます。

$('img').on('dragstart', function(event) { event.preventDefault(); });
ログイン後にコピー

これらの手法を実装すると、特定の要件に応じてサイズ変更を有効にしながら、HTML ページでの画像のドラッグを効果的に無効にします。

以上がHTML での画像のドラッグ アンド ドロップを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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