【マウスオーバー】画像の右クリック及びドラッグ&ドロップ禁止

クラス名img_dlを付与されていないimgタグの画像は、jQueryで右クリック及びドラッグ&ドロップを無効化します。クラス名img_dlを付与されたimgタグの画像のみ右クリック及びドラッグ&ドロップができます。

クラス名img_dlを付与されていないimgタグの画像は右クリック及びドラッグ&ドロップを無効化しています。

クラス名img_dlを付与されたimgタグの画像は右クリック及びドラッグ&ドロップが可能です。

htmlのコードは下記になります。
右クリック及びドラッグ&ドロップを有効にするimgタグのみ、class=”img_dl”を付与しています。

<div class="hover_image_wrap">
	<div class="hover_image">
		<div><a href="https://tech.brick-plan.jp/category/fade/">
			<img src="hover01.jpg" alt="">
		</a></div>
		<p class="caption_txt">クラス名img_dlを付与されていないimgタグの画像は右クリック及びドラッグ&ドロップを無効化しています。</p>
	</div>
	<div class="hover_image">
		<div><a href="https://tech.brick-plan.jp/category/tab/">
			<img src="hover02.jpg" alt="" class="img_dl">
		</a></div>
		<p class="caption_txt">クラス名img_dlを付与されたimgタグの画像は右クリック及びドラッグ&ドロップが可能です。</p>
	</div>
</div>

続いてCSSのコードです。

.hover_image_wrap {
	display: flex;
	justify-content: space-between;
	max-width: 630px;
	margin: 0 auto;
}
.hover_image {
	width: 48%;
}
.hover_image a img {
	transition: 0.6s;
}
.hover_image a:hover img {
	opacity: 0.5;
}
.caption_txt {
	margin: 0.5em 0 0;
	padding: 0;
}
@media screen and (max-width: 480px) {
	.hover_image_wrap {
		flex-direction: column;
	}
	.hover_image {
		width: 100%;
		margin: 0 0 1em;
	}
	.hover_image:last-child {
		margin: 0;
	}
}

最後にjQueryのコードです。
ページ内のクラス名img_dlの付与されていないimgタグに対して処理を実行します。
右クリックはcontextmenuをreturn falseで処理を中断しています。ドラッグ&ドロップはmousedown時の処理をpreventDefaultで無効化しています。mousedownで画像をドラッグするデフォルトの動作を発生させていません。

$(function() {
	$('img').each(function() {
		if(!$(this).hasClass('img_dl')) {
			$(this).on('contextmenu',function(e) {
				return false;
			});
			$(this).mousedown(function(e) {
				e.preventDefault();
			});
		}
	});
});
タイトルとURLをコピーしました