এইচটিএমএল পৃষ্ঠা থেকে কোনও চিত্র টেনে আনতে অক্ষম করুন

Question

আমার পৃষ্ঠায় আমার একটি ছবি রাখা দরকার। আমি সেই চিত্রটি টেনে আনতে অক্ষম করতে চাই। আমি অনেক কিছু চেষ্টা করছি কিন্তু কোন সাহায্য নেই। কেউ আমাকে সাহায্য করতে পারেন?

আমি সেই চিত্রটি ব্যাকগ্রাউন্ড-চিত্র হিসাবে রাখতে চাই না কারণ আমি চিত্রটির আকার পরিবর্তন করছি।

Comments

@ এজেন্টকনুন্ড্রাম - যদি ব্যবহারকারী সংরক্ষণ করেন এবং যা চান তা করেন তবে আমার কোনও সমস্যা নেই। আমার একমাত্র প্রয়োজন হ'ল সেই চিত্রটি টান না।

— ব্যবহারকারী 1034

Answer 1

আপনি এটি পছন্দ করতে পারেন ...

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

এটি কাজ করে দেখুন (বা কাজ না করে বরং)

দেখে মনে হচ্ছে আপনি jQuery ব্যবহার করছেন।

$('img').on('dragstart', function(event) { event.preventDefault(); });

Comments

@ অ্যালেক্স - চিত্রের টান না দেওয়ার উদ্দেশ্যটি চিত্রটি চুরি করছে না। উদ্দেশ্য সম্পূর্ণ আলাদা। আমি সেই চিত্রটি বাছাইযোগ্য এবং ড্রপযোগ্য হিসাবে তৈরি করছি। সুতরাং এটি ব্যাখ্যা করতে এটি অনেক দিন সময় নেয়।

— ব্যবহারকারী 1034

@ অ্যালেক্স - অনড্রাস্টার্ট কি ব্রাউজারটি স্বাধীন?

— ব্যবহারকারী 1034

@ অ্যাডাম $(document)$(window)

— মেরিফিল্ড

আমি সবেমাত্র কাজ করেছি আপনি jQuery $('img').on('dragstart', false);

— এটিকে

@ ওএলএক্স হ্যান্ডলারের অধীনে:The value false is also allowed as a shorthand for a function that simply does return false.

— অ্যাডাম মেরিফিল্ড

Answer 2

সিএসএসের একমাত্র সমাধান: ব্যবহার pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Comments

তবে এটি এফএফ ন্যূনতমে অদ্ভুত নির্বাচন প্রভাবের দিকে নিয়ে যায়। আরও ভাল মিথ্যা ফিরে;

— ভূমি সিংহল

লিঙ্ক হিসাবে ইমেজ ব্যবহার করা হয় না যখন।

— নীলেশ প্যাটেল

দেখে মনে হচ্ছে এটি আই (কোনও সংস্করণ) এ কাজ করবে না দেখুন: caniuse.com/pointer-events

— জাস্টিন ট্যানার

এছাড়াও একটি সিএসএস শুধুমাত্র সমাধান: একটি উপাদান স্থান ধরেimg ।

— অ্যালেক্স

-1! এটি সমস্ত পন্টার ইভেন্টগুলি প্রতিরোধ করতে ব্যবহার করা উচিত (আপনি যখন কোনও চিত্র আপলোড করতে চান তখন যেমন টানাটানি সহ)। জাভাস্ক্রিপ্ট সমাধানটি ব্যবহার করুন!

— ভিনিালী

Answer 3

কেবল আপনার ইমেজ ট্যাগটিতে ড্রাগেবল = "মিথ্যা" যুক্ত করুন:

<img draggable="false" src="image.png">

আইই 8 এবং এর অধীন তবে সমর্থন করে না।

Comments

আমি ম্যাজেন্টো ব্যবহার করছি তাই আমার ডিভিটি পছন্দ করুন: <div class = "product-img-box"> <? Php প্রতিধ্বনি get this-> getChildHtml ('মিডিয়া')?> </div> আমি কীভাবে ডান ক্লিককে সীমাবদ্ধ রাখতে পারি এবং কোনও ড্রাগেবলযোগ্য না? আমার ছবি ডিভ @dmo

— রত্ন

Answer 4

window.ondragstart = function() { return false; } 

Comments

+1 ডাউনভোটগুলি বুঝতে পারছেন না। এটি চূড়ান্ত সমাধান নয়, যদিও এটি কেবল একটি বিশেষ চিত্রই নয়, সমস্তকে টেনে নিয়ে যাওয়া রোধ করে। তবে এটি সঠিক দিকটি দেখায় (এবং আমি মনে করি এটি এটিই প্রথম উত্তর ছিল যা এটি করে)

— ডঃমোল

@ DRMolle এটি আমার উত্তর সম্পর্কে স্টিভের দেওয়া (মুছে ফেলা) মন্তব্যের প্রতিক্রিয়া হতে পারে ।

— অ্যালেক্স

মনে রাখবেন যে কখনও কখনও লোকেরা তাদের বুকমার্ক বারে একটি লিঙ্ক টেনে আনবে - এই সমাধানটি এই ক্ষমতাটি সরিয়ে ফেলবে।

— jClark

Answer 5

সবচেয়ে সহজ ক্রস ব্রাউজার সমাধান

<img draggable="false" ondragstart="return false;" src="..." />

সঙ্গে সমস্যা

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

এটি ফায়ার ফক্সে কাজ করছে না

Answer 6

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

আমি এটি আমার ওয়েবসাইটে http://www.namdevmatrimon.in এ ব্যবহার করেছি / এটি একটি যাদুর মতো কাজ করেছে !!! :)

Comments

এটি ফায়ারফক্সে টেনে নেওয়া যায়

— ডিন ক্রিশ্চান আর্মদা

Answer 7

আমি নিজে চেষ্টা করে দেখেছি এটি কাজ করছে।

$("img").mousedown(function(){
    return false;
});

আমি নিশ্চিত যে এটি সমস্ত চিত্র টেনে আনতে অক্ষম করে। এটি অন্য কিছুকে প্রভাবিত করে তা নিশ্চিত নয়।

Comments

আহ! আপনার উল্লেখ করা উচিত ছিল আপনি jQuery ব্যবহার করেছেন / jQuery ব্যবহার করতে পারেন। JQuery ব্যবহারের জন্য +1।

— অ্যালেক্স

@ অ্যালেক্স - আমি দুঃখিত আমি এটি আমার স্ব চেষ্টা করছিলাম। এবং আমি নিশ্চিত নই যে এটি অন্য কিছুকে প্রভাবিত করে।

— ব্যবহারকারী 1034

তুমি ভালো আছো! না, যতদূর আমি জানি, আপনার এখানে যা আছে তা করা অন্য কোনও কিছুর উপর নেতিবাচক প্রভাব ফেলবে না।

— অ্যালেক্স

ছবিটি কোনও <a>ট্যাগের অভ্যন্তরে আবৃত হলে কী হবে ? তারপরে ব্যবহারকারী যদি ছবিটিতে ক্লিক করেন তবে লিঙ্কটি ক্লিক করা হবে না।

— SeinopSys

ধন্যবাদ। বিটিডব্লিউ, এটি জিডব্লিউটি-তে একটি `ইভেন্ট.প্রিভেন্টডাফল্ট (); with এর সাথেও কাজ করে`

— জোহানা

Answer 8

এই উত্তর দেখুন ; ক্রোম এবং সাফারিতে আপনি ডিফল্ট টানতে অক্ষম করতে নিম্নলিখিত স্টাইলটি ব্যবহার করতে পারেন:

-webkit-user-drag: auto | element | none;

আপনি ফায়ারফক্স এবং আইই (10+) এর জন্য ব্যবহারকারী-নির্বাচনের চেষ্টা করতে পারেন :

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

Answer 9

আপনি টেনে নিতে সক্ষম হতে চাই না এমন প্রতিটি চিত্রের জন্য নিম্নলিখিতটি যুক্ত করতে পারেন ( imgট্যাগের অভ্যন্তরে):

onmousedown="return false;"

যেমন

img src="Koala.jpg" onmousedown="return false;"

Answer 10

এই কোডটি আপনি যা চান ঠিক তেমন করে। এটি ইভেন্টের উপর নির্ভরশীল অন্য কোনও ক্রিয়াকলাপের সময় চিত্রটিকে টেনে আনতে বাধা দেয়।

$("img").mousedown(function(e){
    e.preventDefault()
});

Answer 11

সরাসরি এটি ব্যবহার করুন: ondragstart="return false;"আপনার চিত্র ট্যাগে in

<img src="http://image-example.png" ondragstart="return false;"/>

আপনার যদি একাধিক চিত্র থাকে তবে একটি <div>ট্যাগে মোড়ানো :

<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>

সমস্ত বড় ব্রাউজারে কাজ করে।

Answer 12

যেহেতু আমার চিত্রগুলি আজাক্স ব্যবহার করে তৈরি করা হয়েছিল এবং তাই উইন্ডোজ.লোডে উপলভ্য নয়।

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

এই বিভাগটি নিয়ন্ত্রণ করতে পারি যে কোন বিভাগটি আচরণকে অবরুদ্ধ করে, এটি কেবল একটি ইভেন্টের বাইন্ডিং ব্যবহার করে এবং এটি ভবিষ্যতে অজ্যাক্স তৈরি করা চিত্রগুলির জন্য কিছু না করে কাজ করে।

JQuery নতুন onবাঁধাইয়ের সাথে:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (ধন্যবাদ @ আলাফান)

Comments

.On ব্যবহার করে এটি এর মতো হবে: $ (ডকুমেন্ট) .অন ('ড্রাগস্টার্ট', 'আইএমজি', ফাংশন (ঙ) {ই.প্রিভেন্টডেফল্ট ();});

— ialphan

এটিই সঠিক সমাধান। সীমাহীন imgউপাদানগুলির জন্য বর্তমান বা ভবিষ্যতের জন্য একটি ইভেন্ট বন্ডিং । অন্তত নিবিড়, সবচেয়ে শক্তিশালী।

— ভালমানের

Answer 13

<img draggable="false" src="images/testimg1.jpg" alt=""/>

Answer 14

দুর্দান্ত সমাধান, দ্বন্দ্বগুলির সাথে একটি ছোট সমস্যা ছিল, অন্য জেএস লাইব্রেরি থেকে যদি কারও বিরোধ হয় তবে কেবল এ জাতীয় কোনও বিরোধকে সক্ষম নয়।

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

এই কেউ সাহায্য করে আউট আশা করি।

Answer 15

ভাল আমি জানি না যে উত্তরগুলির উত্তরগুলি সবাইকে সাহায্য করেছে বা না, তবে এখানে একটি সহজ ইনলাইন সিএসএস ট্রিক যা আপনাকে অবশ্যই কোনও এইচটিএমএল পৃষ্ঠায় টানা এবং টেক্সট নির্বাচন করতে অক্ষম করতে সহায়তা করবে।

আপনার <body>ট্যাগ অ্যাড ondragstart="return false"। এটি চিত্রগুলি টেনে আনতে অক্ষম করবে। তবে আপনি যদি পাঠ্য নির্বাচনটি অক্ষম করতে চান তবে যুক্ত করুনonselectstart="return false" ।

কোডটি এর মতো দেখাবে: <body ondragstart="return false" onselectstart="return false">

Answer 16

আপনি আমার সমাধানটিকে সেরা বিবেচনা করতে পারেন। বেশিরভাগ উত্তর আইই 8 এর মতো পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ না কারণ ই.প্রিভেন্টডাফল্ট () অ্যানড্র্যাগস্টার্ট ইভেন্টের পাশাপাশি সমর্থিত হবে না । এটি ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ করতে আপনাকে এই চিত্রের জন্য মাউস সরানো ইভেন্টটি ব্লক করতে হবে । নীচে উদাহরণ দেখুন:

jQuery এর

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

jQuery ছাড়া

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

এমনকি IE8 এর জন্যও পরীক্ষিত এবং কাজ করেছে

Answer 17

চিত্রটিতে নিম্নলিখিত সিএসএসের বৈশিষ্ট্যগুলি সেট করুন:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

Comments

ফায়ারফক্সে (ম্যাক ফায়ারফক্স

— বেন হুইলার

Answer 18

ঠিক আছে, এটি সম্ভব, এবং পোস্ট করা অন্যান্য উত্তরগুলি পুরোপুরি বৈধ, তবে আপনি একটি নিষ্ঠুর শক্তি গ্রহণ করতে পারেন এবং এর ডিফল্ট আচরণকে আটকাতে পারেন mousedown চিত্রগুলিতে । যা, ছবিটি টানা শুরু করতে হবে।

এটার মতো কিছু:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};  

Answer 19

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

এই প্লাঙ্কারে কাজ করে http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZML

Answer 20

JQuery:

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

আপনি বাচ্চাদের টানা এবং বাদ দেওয়া থেকে বাঁচাতে চান এমন অন্য কোনও ধারক দিয়ে দেহ নির্বাচনকারীকে প্রতিস্থাপন করতে পারেন।

Answer 21

আপনি এই জন্য ইনলাইন কোড ব্যবহার করতে পারেন

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

এবং দ্বিতীয় বিকল্পটি হ'ল বাহ্যিক বা অন-পৃষ্ঠা সিএসএস ব্যবহার

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

<img src="http://www.ourkanpur.com/images/logo.png">

উভয়ই সঠিকভাবে কাজ করছে আমি এই সাইটে বাহ্যিক CSS ব্যবহার করছি (এখানে ক্লিক করুন)

Comments

এগুলির কোনওটিই ফায়ারফক্সে (ম্যাক ফায়ারফক্স

— বেন হুইলার

Answer 22

উত্তর সহজ:

<body oncontextmenu="return false"/>- ডান-ক্লিক <body ondragstart="return false"/>অক্ষম করুন - মাউস টানুন অক্ষম করুন - <body ondrop="return false"/>মাউস ড্রপ অক্ষম করুন

Answer 23

আমি এখানে প্রদর্শিত সিএসএস বৈশিষ্ট্যগুলি পাশাপাশি নীচের জাভাস্ক্রিপ্টের সাথে অনড্রাগস্টার্টটি পর্যবেক্ষণ করেছি:

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

Answer 24

আমার নিজের উত্তর থেকে চুরি করা , কেবল চিত্রের উপরে একই আকারের সম্পূর্ণ স্বচ্ছ উপাদান যুক্ত করুন। আপনি যখন নিজের ইমেজটির আকার পরিবর্তন করবেন তখন উপাদানটির পুনরায় আকার দিতে ভুলবেন না।

এটি বেশিরভাগ ব্রাউজার, এমনকি বয়স্কদের জন্যও কাজ করা উচিত।