クラス名img_dlを付与されていないimgタグの画像は、jQueryで右クリック及びドラッグ&ドロップを無効化します。クラス名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();
});
}
});
});