جلوگیری از drag شدن عکس ها در html

ساعت : ۱۶:۰۹

تاریخ : ۳ دی ۱۳۹۷

چطور از درگ کردن عکس ها جلوگیری کنیم؟

خب حتما می دونید بعضی عکس ها در سایت قابل درگ کردن هستن و کاربر به راحتی می تونه این عکس هارو drag کنه. بنا به دلایل مختلفی درگ کردن تصاویر در html خیلی وقت ها خوشایند نیست و بهتره که این قابلیت رو مسدود کنیم یا به عبارتی از درگ گردن عکس ها در html جلوگیری کنیم.

ما تو این مقاله قصد داریم تا به شما آموزش بدیم که از درگ کردن عکس ها در html جلوگیری کنید.

جلوگیری از درگ کردن عکس ها در html

برای جلوگیری از درگ شدن تصاویر در html روش های مختلفی وجود داره به بررسی اونا می پردازیم :

جلوگیری از درگ کردن درگ کردن تصاویر در html

۱- جلوگیری از درگ کردن تصاویر به کمک attribute :

برای این کار فقط کافیه از ویژگی draggable استفاده کنید.

<img draggable="false" src="/img/csspark.jpg">

۲- جلوگیری از درگ کردن تصاویر به کمک jQuery :

برای این کار فقط کافیه کد های مقابل رو به انتهای کدهای html تون اضافه کنید.(بهتره که کد ها رو بین تگ های و اضافه کنید.)
نکته : چون کدهای مقابل کدهای جی کوئری هستن پس حتما باید خود جی کوئری رو به صفحه html تون بشناسونید.
نکته بعدی : اگر میخواین فقط قابلیت درگ کردن یک عکس خاص رو غیر فعال کنید ، به اون عکس یه id یا calss بدین بعد در کد مقابل به جای (“img”) از (“#myID”) یا (“.myClass”) استفاده کنید.


<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("img").mousedown(function(){
return false;
});
});
</script>

۳- جلوگیری از درگ کردن تصاویر به کمک javascript:

در صورتی که از jQuery استفاده نمی کنید می تونید از کدهای مقابل که جاوا اسکریپت خام هستند استفاده کنید.
نکته : اگر میخواین فقط قابلیت درگ کردن یک عکس خاص رو غیر فعال کنید ، به اون عکس یه id یا calss بدین بعد در کد مقابل میتونید به جای کد getElementsByTagName از getElementsById و یا کد getElementsByClassName استفاده کنید.


<script>
window.onload = function () { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { img = images[i]; img.onmousedown = function() { return false; }; } };
</script>

حالا اگه دوس ندارید از کدهای جاوا اسکریپت به صورت جداگانه استفاده کنید می تونید از کد جاوا اسکریپت به صورت attribute استفاده کنید. برای این کار میتونید از کد زیر استفاده کنید :


<img onmousedown="return false;" src="/img/csspark.jpg">

در صورتی که به آموزش html css و یا آموزش jquery و یا آموزش bootstrap علاقه دارید میتونید از آموزش های پروژه محور و کاربردی سی اس اس پارک استفاده کنید که ضمانت بازگشت وجه هم داره.



  • جلوگیری از drag شدن عکس ها در html
    نام نویسنده : امیرمسعود طالاری
  • جلوگیری از drag شدن عکس ها در html
    نام نویسنده : رضا ابولحسن زاده
  • جلوگیری از drag شدن عکس ها در html
    نام نویسنده : رضا ابولحسن زاده
  • جلوگیری از drag شدن عکس ها در html
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس وب و کارشناسی ارشد رشته نرم افزار

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *