সিএসএস / জেএস কী ভূতের ছবি টেনে আটকায়?

Question

ব্যবহারকারীরা যে চিত্রটিকে টেনে আনার চেষ্টা করছেন তার কোনও ভূত দেখে বাধা দেওয়ার কোনও উপায় আছে (চিত্রগুলির সুরক্ষার বিষয়ে উদ্বেগ নয়, তবে অভিজ্ঞতা)।

আমি এটি চেষ্টা করেছি যা পাঠ্য এবং চিত্রগুলিতে নীল নির্বাচনের সাথে সমস্যার সমাধান করে তবে ভূতের চিত্রটি নয়:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

(আমিও ডিভের সাথে একই নিয়ম প্রয়োগ করে একটি ডিভের অভ্যন্তরে চিত্রটি বাসা বাঁধার চেষ্টা করেছি)। ধন্যবাদ

Comments

এই উত্তরটি দেখুন: stackoverflow.com/a/4211930/1060487 প্রশ্নের সম্ভাব্য নকল

— mattdlockyer

Answer 1

আপনি মার্কআপ বা জাভাস্ক্রিপ্ট কোড দুটিতে draggableবৈশিষ্ট্যটি সেট করতে পারেন false।

// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);

<img id="myImage" src="http://placehold.it/150x150">

Comments

কেন এটি জাভাস্ক্রিপ্ট দিয়ে যুক্ত করবেন ??? <img id="myImage" src="http://placehold.it/150x150" draggable="false">

— গ্রেগ

@ গ্রেগ: আপনি আমাকে জিজ্ঞাসা করছেন কেন? এটি ওপি, যিনি একটি জাভাস্ক্রিপ্ট সমাধান চেয়েছিলেন। প্লাস আমি যাই হোক না কেন "মার্কআপ বা জাভাস্ক্রিপ্ট কোড" তে বললাম, সুতরাং আপনার মার্কআপটি সম্পাদনার বিকল্প থাকলে আপনি মার্কআপে এটি করতে পারতেন না এমনটি নয় ।

— BoltClock

সাথে এফএফ এ কাজ করে না -moz-user-select: none। সম্ভাব্য সমাধান: অ্যাড pointer-events: none।

— সিড্রিক রাইচেনবাচ

হয়তো আমি প্রশ্নের ভুল ব্যাখ্যা দিয়েছি কিন্তু ওপি কীভাবে জিজ্ঞাসা করছে না যে তারা কীভাবে টানাটানি এবং ড্রপ বজায় রাখতে পারে তবে কেবল ভুতুড়ে ছবিটি লুকায়? সেট draggableকরা falseসম্পূর্ণরূপে ড্রাগ এবং ড্রপ অক্ষম করবে।

— জেমস

@ জেমস: সত্যি কথা বলতে প্রশ্ন থেকে খুব পরিষ্কার নয় not আমি বেশিরভাগই অনুমানের অধীনে জবাব দিচ্ছি যে ভূতের চিত্রটি ড্রাগ-অ্যান্ড-ড্রপ (যা এটি) এর জন্য ভিজ্যুয়াল ইন্ডিকেটর এবং এটি যে বেশিরভাগ লোকেরা ভূতের চিত্রটি আড়াল করতে চান তারা সাধারণত ড্র্যাগ-এন্ড-ড্রপ হয় কিনা সেদিকে খেয়াল রাখেন না is পুরোপুরি অক্ষম।

— বোল্টক্লক

Answer 2

আমি মনে করি আপনি আপনার পরিবর্তন করতে পারেন

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

একটি মধ্যে

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

Comments

@ উইকোটোরোসা সত্য, তবে একটি ডি-ফ্যাক্টো স্ট্যান্ডার্ড এখনও একটি স্ট্যান্ডার্ড, ডাব্লু 3 সি বা না। এটি হ'ল, যদি প্রতিটি ব্রাউজার এটিকে সমর্থন করে তবে এটি ভাল। মনে রাখবেন যে ডাব্লু 3 সি স্টাফ প্রচুর পরিমাণে এজেএক্সের মতো মালিকানা হিসাবে শুরু হয়েছিল।

— বিজোর

এই সমাধান IE11 এবং ফায়ারফক্স 57.0 এ কাজ করে না।

— টিউডার সিওট্লোস

Answer 3

এটি চেষ্টা করুন:

img {
  pointer-events: none;
}

এবং এড়ানোর চেষ্টা করুন

* {
  pointer-events: none;
}

Comments

এটি একটি দুর্বল সমাধান, কারণ এটি উপাদানটির সাথে ইন্টারঅ্যাক্ট করার সমস্ত ক্ষমতা সরিয়ে দেয়। ওপি কেবলমাত্র কোনও উপাদানটির "টেনে আনুন" কার্যকারিতা অক্ষম করতে বলছে, উপাদানটির সাথে কোনও এবং সমস্ত পয়েন্টার ভিত্তিক মিথস্ক্রিয়া সম্পূর্ণরূপে অক্ষম করতে নয়।

— চাদ

@ চ্যাড এটি সত্য তবে চিত্রটি মোড়ানো এবং ইভেন্ট শ্রোতাগুলিকে মোড়কের সাথে যুক্ত করা সম্ভব হবে যখন চিত্রটিতে কোনও ভূতের চিত্র নেই।

— ভিনসেন্ট হচ-ড্রেই

Answer 4

ওয়েবকিট ব্রাউজারগুলিতে চিত্রগুলি অক্ষম করতে আপনি একটি CSS সম্পত্তি ব্যবহার করতে পারেন।

img{-webkit-user-drag: none;}

Comments

এই সাথে কাজ করে -ms-user-drag, -moz-user-dragএবং user-drag। একটি দুর্দান্ত সিএসএস-সমাধান!

— বিজোর

Answer 5

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

<img draggable="false" onmousedown="return false" style="user-drag: none" />

যদি আপনি আত্মবিশ্বাসী হন যে ব্যবহারকারীর জেএস থাকবে, আপনার কেবল জেএস বৈশিষ্ট্য ইত্যাদি ব্যবহার করতে হবে আরও নমনীয়তার জন্য, অনড্রাগস্টার্ট, অন্বেষণকারী স্টার্ট এবং কিছু ওয়েবকিট ট্যাপ / টাচ সিএসএস দেখুন।

Comments

পরিবর্তে আপনি (this.onclick || this.click) () করতে চাইতে পারেন .. যদি অনক্লিক এই যুক্তি অনুসারে অপরিজ্ঞাত করা যায়?

— ভ্যান এনগুইন

কাইজোকু ধন্যবাদ, আমি এটি বিবেচনা করি নি! আপনার পরামর্শের ভিত্তিতে আমার উত্তর আপডেট করেছে।

— বিউজর

এটি ফায়ারফক্সে কাজ করছে বলে মনে হচ্ছে না কারণ কঠোরভাবে বলতে গেলে, <img> এমনকি অন্লিক বা ক্লিক ইভেন্ট নেই। যাইহোক, আমি সবেমাত্র অনমাউসআপ অংশটি ব্যবহার করেছি এবং পিতামাতার ডিআইভি অনক্লিকাকে পরিচালনা করতে দেই এবং এটি কাজ করে।

— নেলসন

@ নেলসন আমাকে জানাতে ধন্যবাদ। কোনও অনমাইজডাউন / আপ হ্যান্ডলার থেকে রিটার্নের মান নির্বিশেষে অনক্লিক ফায়ার হওয়ার পরেও অনম্যাসআপের প্রয়োজন হয়নি বলে মনে হয়। আমি সরলতার জন্য আমার উত্তরটি সংশোধন করার সিদ্ধান্ত নিয়েছি। নতুন ওয়ান-লাইনারটি সূক্ষ্মভাবে কাজ করা উচিত; সবেমাত্র এফএফ, সাফারি, ক্রোম, আইই 8/10 এ পরীক্ষিত।

— বিজোর

আমি ফায়ারফক্স 62 এ আছি এবং onmousedown="return false"যথেষ্ট। ছবিটি টেনে আনার সময় ব্যবহারকারীর ছবিটি নির্বাচন না করা এড়ানো দরকার, যা তাদের পরে নির্বাচনটি টেনে আনতে দেয়।

— loxaxs

Answer 6

হ্যান্ডেল dragstartইভেন্ট এবং return false।

Answer 7

আপনার যদি সত্যিই টানা ইভেন্টগুলি ব্যবহার করার প্রয়োজন হয় এবং ড্র্যাগেবল = মিথ্যা সেট না করতে পারেন তবে আপনি একটি বিকল্প ভূত চিত্র নির্ধারণ করতে পারেন। সুতরাং ঠিক যেমন একটি ফাঁকা png বরাদ্দ করুন:

    $('#img').bind({
        dragstart: function(e) {
            var dragIcon = document.createElement('img');
            dragIcon.src = 'blank.png';
            dragIcon.width = 100;
            e.dataTransfer.setDragImage(dragIcon, -10, -10);
        }
    });

Comments

সমস্ত ব্রাউজার সমর্থন করে না setDragImage, এমনকি তারা টেনে আনুন এবং ড্রপকে সমর্থন করে যেমন IE10 / 11।

— জেমস

খালি পিএনজি ব্যবহার না করে এই কৌশলটি ব্যবহার করা কি সম্ভব?

— ফাবিয়েন কোয়াটারভাক্স

আপনি একটি ইনলাইন-সংজ্ঞায়িত বেস 64 এনকোডযুক্ত চিত্র ব্যবহার করতে পারেন ... যেমনdragIcon.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

— মারে স্মিথ

Answer 8

চিত্রটি খালি ডিভের পটভূমি হিসাবে বা স্বচ্ছ উপাদানের অধীনে রাখুন। ব্যবহারকারী যখন ছবিতে টানতে ক্লিক করেন, তারা একটি ডিভিতে ক্লিক করছেন।

Http://www.flickr.com/photos/thefella/5878724253/?f=hp দেখুন

<div id="photo-drag-proxy"></div>

Answer 9

ফায়ারফক্সের জন্য আপনাকে এটির সাথে আরও গভীরভাবে যেতে হবে:

var imgs = document.getElementsByTagName('img');

    // loop through fetched images
    for (i = 0; i < imgs.length; i++) {
        // and define onmousedown event handler
        imgs[i].onmousedown = disableDragging;
    }

function disableDragging(e) {
        e.preventDefault();
    }

উপভোগ করুন।

Answer 10

আমি দেখতে পেয়েছি যে আইইয়ের জন্য, আপনাকে টেনে আনা রোধ করার জন্য ছবি এবং অ্যাঙ্করগুলিতে অবশ্যই ড্রাগেবল = "মিথ্যা" বৈশিষ্ট্য যুক্ত করতে হবে। সিএসএস বিকল্পগুলি অন্যান্য সমস্ত ব্রাউজারের জন্য কাজ করে। আমি jQuery এ এটি করেছেন:

$("a").attr('draggable', false); 
$("img").attr('draggable', false);

Answer 11

খালি ইভেন্ট শ্রোতাদের যোগ করার চেয়ে এখানে আরও সহজ সমাধান রয়েছে। শুধু pointer-events: noneআপনার ইমেজ সেট করুন। যদি আপনার এখনও এটি ক্লিকযোগ্য হওয়ার প্রয়োজন হয় তবে এর চারপাশে একটি ধারক যুক্ত করুন যা ইভেন্টটিকে ট্রিগার করে।

Answer 12

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

Answer 13

ফায়ারফক্সে পরীক্ষিত: চিত্রটি সরানো এবং ফিরিয়ে দেওয়া কাজ করে! এবং এটি কার্যকর করার সময়ও স্বচ্ছ। এই ক্ষেত্রে,

$('.imageContainerClass').mousedown(function() {
    var id = $(this).attr('id');
    $('#'+id).remove();
    $('#'+id).append('Image tag code');
});

সম্পাদনা : এটি কেবল আইই এবং ফায়ারফক্সে অদ্ভুতভাবে কাজ করে। আমি draggable = falseপ্রতিটি ছবিতে যুক্ত করেছি। ক্রোম এবং সাফারি সহ এখনও একটি ভূত।

সম্পাদনা 2 : ব্যাকগ্রাউন্ড-চিত্র সমাধানটি সত্যই সেরা। একমাত্র সূক্ষ্মতা হ'ল background-sizeব্যাকগ্রাউন্ড-চিত্রটি প্রতিবার পরিবর্তিত হওয়ার সাথে সাথে সম্পত্তিটিকে নতুন করে সংজ্ঞায়িত করতে হবে! বা তাই, এটি আমার পক্ষ থেকে দেখে মনে হচ্ছে। আরও ভাল, আই আই এর imgঅধীনে আমার সাধারণ ট্যাগগুলির সাথে একটি সমস্যা ছিল , যেখানে আইই চিত্রগুলি পুনরায় আকার দিতে ব্যর্থ হয়েছিল। এখন, চিত্রগুলির সঠিক মাত্রা রয়েছে। সরল:

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

এছাড়াও, সম্ভবত সেগুলি বিবেচনা করুন:

background-Repeat:no-repeat;
background-Position: center center;

Answer 14

কোনও আইটেম টেনে আনলে আপনি প্রদর্শিত চিত্রটি সেট করতে পারেন। ক্রোম দিয়ে পরীক্ষিত।

setDragImage

ব্যবহার

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

বিকল্প হিসাবে, ইতিমধ্যে উত্তরে উল্লিখিত হিসাবে, আপনি draggable="false"এইচটিএমএল উপাদানটি সেট করতে পারেন , যদি উপাদানটি একেবারে টেনে আনতে না পারা যায় তবে কোনও সমস্যা নেই।

Answer 15

সমস্ত ব্রাউজারের উপসর্গ সহ বাছাই বা টেনে আনার জন্য সর্ব-সর্বশেষে:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;

---

আপনি draggableবৈশিষ্ট্যটিও সেট করতে পারেন false। : আপনি ইনলাইন এইচটিএমএল সঙ্গে এটা করতে পারেন draggable="false"জাভাস্ক্রিপ্ট সঙ্গে: elm.draggable = falseঅথবা jQuery সঙ্গে: elm.attr('draggable', false)।

আপনি এতে onmousedownফাংশনটি পরিচালনা করতে পারেন return false। আপনি এটি ইনলাইন এইচটিএমএল onmousedown="return false":, জাভাস্ক্রিপ্ট সহ: elm.onmousedown=()=>return false;বা jQuery দিয়ে করতে পারেন:elm.mousedown(()=>return false)

Answer 16

এটি আমার জন্য কাজ করে, আমি কিছু লাইটবক্স স্ক্রিপ্ট ব্যবহার করি

.nodragglement {
    transform: translate(0px, 0px)!important;
}