জেএস ব্যবহার না করে কোনও চিত্রকে টেনে আনেযোগ্য বা নির্বাচনযোগ্য হতে আটকাচ্ছে

Question

জাভাস্ক্রিপ্টের অবলম্বন না করে ফায়ারফক্সে - একই সাথে কোনও ফায়ারকে ড্রাগযোগ্য এবং নির্বাচনযোগ্য না করার কোনও উপায় কী কেউ জানেন? তুচ্ছ মনে হচ্ছে, তবে এখানে সমস্যাটি রয়েছে:

1) ফায়ারফক্সে টেনে এনে হাইলাইট করা যায়:

<img src="...">

2) সুতরাং আমরা এটি যুক্ত করি, তবে টেনে আনার সময় চিত্রটি হাইলাইট করা যেতে পারে:

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

3) তাই আমরা এটি যুক্ত করব, হাইলাইটিং ইস্যুটি ঠিক করতে, কিন্তু তারপরে প্রতিলিপিটি দিয়ে আবার চিত্রটি টেনে নিয়ে যায়। অদ্ভুত, আমি জানি! এফএফ 16.0.1 ব্যবহার করে

<img src="..." draggable="false" style="-moz-user-select: none;">

সুতরাং, কেউ কি জানেন যে "-মোজ-ব্যবহারকারী-নির্বাচন: কিছুই নয়" যুক্ত করে কোনওভাবে ট্রাম্প এবং "ড্রাগেবল = মিথ্যা" অক্ষম করবেন? অবশ্যই, ওয়েবকিট প্রত্যাশার মতো কাজ করে। ইন্টারভিউগুলিতে এ সম্পর্কে কিছুই নেই ... আমরা যদি একসাথে কিছুটা আলোকিত করতে পারি তবে এটি দুর্দান্ত হবে।

ধন্যবাদ !!

সম্পাদনা করুন: এটি UI উপাদানগুলিকে অজান্তেই টেনে আনা এবং ব্যবহারযোগ্যতা উন্নত করা থেকে বিরত রাখা - অনুলিপি সুরক্ষা স্কিমের কিছু খোঁড়া প্রচেষ্টা নয় :-)

Comments

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

— জিম গ্যারিসন

@ জিমগারিসন অবশ্যই না, দুঃখিত আমি আরও সুনির্দিষ্ট হওয়া উচিত ছিল, আমি আমার কিছু ইউআই উপাদানগুলি স্থানান্তরিত হতে বাধা দেওয়ার চেষ্টা করছি, সঠিক প্রসঙ্গে এটি ব্যবহারের পক্ষে ক্ষতি করছে।

— tmkly3

পরিবর্তে খুব কার্যকর যদি আপনার পটভূমির উপাদান থাকে যা ডেস্কটপে টেনে আনতে হবে (বা এর উপর কাজ করার সময় ব্রাউজার উইন্ডোটির পিছনে কিছু ফাইলের মধ্যে href কোড লাইনগুলির চেয়ে খারাপ!) যখন তারা খুব ছোট আধুনিক স্ক্রোল বারগুলির নিকটে থাকে এবং আপনি স্ক্রোলগুলি পরীক্ষা করার সময় বারে ঠিক হিট করবেন না।

— গারাভানি

এটি ফায়ারফক্সে সত্যই দীর্ঘকাল ধরে পরিচিত সমস্যা হিসাবে দেখা যাচ্ছে ( সদৃশ? )

— কোডার

Answer 1

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

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

Comments

ধন্যবাদ, আমারও সেই জায়গাগুলি রয়েছে, তবে সমস্যাটি ফায়ারফক্সে বাগের মতো দেখতে শুরু করছে। আমার মনে হয় আপাতত এটি সমাধান করার একমাত্র উপায় জাভাস্ক্রিপ্টের মাধ্যমে।

— tmkly3

সমস্ত ব্রাউজারে কাজ করেছেন।

— মিলাদ আবুয়ালি

ঠিক আছে তো আমি কীভাবে এটির কোনও প্রভাব না দেখিয়ে তবুও টানুন ইভেন্টটিকে অগ্নিসংযোগ করব?

— Ty_

আমি দেখতে পেয়েছি যে আমি ফায়ারফক্স 47 এ টানতে পারলাম তবে ম্যাসাডোর অনড্রাগস্টার্ট = "মিথ্যা ফিরুন;" ইমেজ ট্যাগ সম্পত্তি এটি স্থির।

— অ্যান্ড্রু পেট

আমি এখনও ক্রোমে টেনে আনতে পারি

— lonewarrior556

Answer 2

আমি আমার সমাধান ভাগ করে নিতে ভুলে যাচ্ছি, জেএস ব্যবহার না করে এটি করার কোনও উপায় আমি খুঁজে পাচ্ছি না। কিছু কর্নার কেস রয়েছে যেখানে @ জেফারি এ উডেনের প্রস্তাবিত সিএসএস কেবল অভ্যাস করবে না।

এটি আমার সমস্ত ইউআই কন্টেইনারগুলিতে আমি প্রয়োগ করি, প্রতিটি সন্তানের উপাদানগুলিতে এটি পুনরুদ্ধার করায় প্রতিটি উপাদান প্রয়োগ করার দরকার নেই।

সিএসএস:

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

জাতীয়:

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

এটি যতটা প্রয়োজন তার চেয়ে জটিল ছিল।

Comments

$ (এল) .অন ('ড্রাগস্টার্ট', ফাংশন (ই) {ই.প্রিভেন্টডেফল্ট ();});

— পিট বি

এটি <img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">ওপির কোডের সাথে মিলে যায় বলেও লেখা যেতে পারে ।

— মাসাদো

Answer 3

আপনি pointer-eventsনিজের সিএসএসে সম্পত্তিটি ব্যবহার করতে পারেন এবং এটিকে 'কোনওটি নয়' এর সমান করে দিতে পারেন

img {
    pointer-events: none;
}

সম্পাদিত

এটি ইভেন্টটি (ক্লিক) ব্লক করবে। সুতরাং আরও ভাল সমাধান হবে

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

Comments

এটি এইভাবে করা একটি চিত্রের আইকনটিকে আরও বেশি গ্লাইফিকনের মতো আচরণ করে তোলে, তাই আমি এই পদ্ধতিটি সবচেয়ে ভাল পছন্দ করি।

— ফানকোডাব্যাট

এটি (অনক্লিক) এর মতো ইভেন্টগুলিও ব্যবহারযোগ্য না করে তোলে .. আপনি যদি এই পদ্ধতির ব্যবহার করেন তবে সাবধান হন।

— নিকোলাস বোভ্রেট

গৃহীত উত্তর সর্বশেষতম সফ্টওয়্যার সংস্করণে না থাকলেও এই উত্তরটি এখনও বৈধ। এটি নতুন গৃহীত উত্তর হওয়া উচিত। @ tmkly3

— প্রগতিমার

আমাদের যদি ইমেজটির জন্য ইভেন্ট ক্লিক করে থাকে তবে এটি সমস্যা তৈরি করবে। এটি ক্লিক ইভেন্টটি ব্লক করবে

— প্রতাপ একে 21

Answer 4

পরিস্থিতির উপর নির্ভর করে, divসিএসএসের সাহায্যে চিত্রটিকে একটি ব্যাকগ্রাউন্ড চিত্র তৈরি করা প্রায়শই সহায়ক ।

<div id='my-image'></div>

তারপরে সিএসএসে:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

একটি বোতাম এবং একটি ভিন্ন আকারের বিকল্পের সাথে লাইভ উদাহরণের জন্য এই জেএসফিডেলটি দেখুন ।

Answer 5

আপনি সম্ভবত অবলম্বন করতে পারে

<img src="..." style="pointer-events: none;">

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, ব্যবহারকারীর টানা ফায়ারফক্স সমর্থন করে না। এই জন্য আপনাকে ধন্যবাদ!

— Merritt6616

আমার পক্ষেও, "পয়েন্টার-ইভেন্টস" এর সমাধান ছিল কারণ এটি ক্রস-ব্রাউজারে কাজ করেছিল ("ইউজার-ড্র্যাগ" এর ফায়ারফক্সে কোনও প্রভাব নেই, কমপক্ষে 11.2018-এ)

— ডেভিড ডাল বাসকো

Answer 6

বিশেষত উইন্ডোজ এজ ব্রাউজারের জন্য একটি জেনেরিক সমাধান (মেমরির ব্যবহারকারী নির্বাচন হিসাবে: কোনওটি নয়; সিএসএস নিয়ম কাজ করে না):

window.ondragstart = function() {return false}

দ্রষ্টব্য: আপনার যখন ক্লিক ইভেন্টের প্রয়োজন হয় তখন draggable="false"এটি প্রতিটি imgট্যাগ যুক্ত করা বাঁচাতে পারে (যেমন আপনি ব্যবহার করতে পারবেন না pointer-events: none), তবে টানা আইকন চিত্রটি প্রদর্শিত হবে না।

Comments

একমাত্র উত্তর যা আসলে আমার পক্ষে কাজ করে! কেন এটি বেশি ভোট দেওয়া হয়নি তা জানেন না।

— অ্যাল্ডারনলৌ

Answer 7

আপনি ব্যাকগ্রাউন্ড ইমেজ হিসাবে ইমেজ সেট করতে পারে। যেহেতু এটি একটিতে থাকে divএবং এটি divঅবারোগ্য হয়, তাই চিত্রটি অনগ্রহযোগ্য হবে:

<div style="background-image: url("image.jpg");">
</div>

Answer 8

আমি একটি ডিভ উপাদান তৈরি করেছি যা চিত্রের মতো একই আকার এবং চিত্রের উপরে অবস্থিত । তারপরে, মাউসের ইভেন্টগুলি চিত্রের উপাদানগুলিতে যায় না।