এইচটিএমএল উপাদানগুলিতে টেনে আনুন এবং নিষ্ক্রিয় করবেন?

109

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

ব্রাউজারের টানা এবং ড্রপ নিষ্ক্রিয় করার কোন সহজ উপায় আছে? ব্যবহারকারী নির্দিষ্ট উপাদানগুলিতে ক্লিক করার সময় আমি এটিকে বন্ধ করতে সক্ষম হতে চাই, তবে এটি পুনরায় সক্ষম করুন যাতে ব্যবহারকারীরা এখনও আমার উইন্ডোজের বিষয়বস্তুগুলিতে তাদের ব্রাউজারের সাধারণ কার্যকারিতাটি ব্যবহার করতে পারে। আমি jQuery ব্যবহার করছি, এবং যদিও আমি এটি দস্তাবেজগুলি ব্রাউজ করে খুঁজে পাইনি, আপনি যদি খাঁটি jQuery সমাধান জানেন তবে এটি দুর্দান্ত।

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

— নিকোলাস ফ্লাইেন্ট
সূত্র

2

আমি প্রচার করব যে @ সিনট্যাক্স এরর এর উত্তর (নীচে, 100+ ভোট) নির্বাচিত উত্তর হওয়া উচিত, কারণ এটি ড্রাগ-না-করা ক্রিয়াকলাপকে প্রভাবিত করে না।

— শন উইলসন

78

মোডাউনড ইভেন্টে ডিফল্ট প্রতিরোধের চেষ্টা করুন:

<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>

অথবা

<div onmousedown="return false">asd</div>

— সের্গেই ইলিনস্কি
সূত্র

2

+1 - তবে এটি ফায়ারফক্সে দুর্ভাগ্যজনক পার্শ্ব-প্রতিক্রিয়া করেছে (.0.০ এবং নিম্ন) যেখানে এটি :activeসিউডো-শ্রেণিকে উপাদানটিতে প্রয়োগ করা বাধা দেয় । এর অর্থ এটি আমি আমার লিঙ্কগুলির জন্য সত্যই ব্যবহার করতে পারি না।

— অ্যান্ডি ই

3

দুঃখিত, এটি ভয়ানক। নীচে উত্তর দেখুন।

— ম্যাডব্রেকস

216

এই জিনিসটি কাজ করে ..... চেষ্টা করে দেখুন

<BODY ondragstart="return false;" ondrop="return false;">

আশা করি এটা সাহায্য করবে. ধন্যবাদ

— বাক্যগঠন ত্রুটি
সূত্র

6

দুর্দান্ত কাজ! (বৈশিষ্ট্যগুলিকেও কোনও <div>উপাদানের উপরে স্থাপন করা যেতে পারে ))

— ভ্যাসিলিভিনিকভ

4

এই উত্তরের জন্য ভোট দিয়েছেন। মোউসডাউন উত্তর আইএমও খুব সংক্ষিপ্ত আসে (আপনি অন্যান্য ক্ষেত্রেও মাউসডাউন ইভেন্টটি ব্যবহার করতে পারেন)। এই উত্তরটি পুরোপুরি ভাল কাজ করেছে :)

— ড্যানিয়েল ভ্যান ডোমলে

4

এটি প্রকৃতপক্ষে আরও উত্তম উত্তর, মাউসের নিচে 'প্রতিরোধের ডিফল্ট' () থাকায় অনেকগুলি পার্শ্ব প্রতিক্রিয়া হয় (যেমন ফর্ম টেক্সট ইনপুটগুলিকে ফোকাস / ফোকাস প্রতিরোধ করা)

— জেকিমি

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, যেহেতু এটি ক্লিক ক্রিয়াকে প্রভাবিত করবে না।

— রাফেলমোরাইস

এটি copy pasteশ্রোতার সাথে মিলিতভাবে কোনও পৃষ্ঠার অন্যান্য অংশগুলিকে বিরূপ প্রভাবিত না করে কোনও কিছু আটকানো / টেনে আনার পরিবর্তে কোনও ব্যবহারকারীকে ইনপুট টাইপ করতে বাধ্য করার নিখুঁত সমাধান বলে মনে হচ্ছে।

— ড্যানিয়েল বনেল

21

draggable="false"বৈশিষ্ট্য ব্যবহার করে আপনি কেবল টেনে আনতে অক্ষম করতে পারেন ।
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
সূত্র

ক্রোম 59

— কাশীরাজা

1

এটি হ'ল গ্রহণযোগ্য উত্তর, জেএস নয়, সাধারণ এইচটিএমএল বৈশিষ্ট্য যা সমস্ত ব্রাউজারগুলিতে সমর্থিত: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

1

এটি সেরা উত্তর

— আরগুন

12

এটি কার্যকর হতে পারে: আপনি পাঠ্য, চিত্র এবং মূলত সব কিছুর জন্য CSS3 দিয়ে নির্বাচন অক্ষম করতে পারেন।

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

অবশ্যই কেবল নতুন ব্রাউজারগুলির জন্য। আরও বিশদ জানতে চেক করুন:

সিএসএস ব্যবহার করে পাঠ্য নির্বাচন হাইলাইটিং কীভাবে অক্ষম করবেন?

— বাজে কথা
সূত্র

তোমাকে অনেক ধন্যবাদ. আমি একটি ক্লিক-সক্ষম চাই div, কিন্তু সাথে টানা অক্ষম।

— আয়নিক বিজাউ

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

— টশ

8

JQuery এর সাথে এটি এমন কিছু হবে:

$(document).ready(function() {
  $('#yourDiv').on('mousedown', function(e) {
      e.preventDefault();
  });
});

আমার ক্ষেত্রে আমি ব্যবহারকারীকে ইনপুটগুলিতে ড্রপ পাঠ্যটি অক্ষম করতে চেয়েছিলাম তাই আমি "মোডাউন" পরিবর্তে "ড্রপ" ব্যবহার করেছি।

$(document).ready(function() {
  $('input').on('drop', function(event) {
    event.preventDefault();
  });
});

পরিবর্তে ইভেন্ট.প্রিভেন্টডিফল্ট () আপনি মিথ্যা ফিরিয়ে দিতে পারেন। এখানে পার্থক্য।

এবং কোড:

$(document).ready(function() {
  $('input').on('drop', function() {
    return false;
  });
});

— ভিক্টর রোমানো
সূত্র

2

এটি আমার ওয়েব অ্যাপ্লিকেশনগুলির সাথে আমি সর্বদা ব্যবহার করি iddle

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

এটি আপনার অ্যাপ্লিকেশানের যেকোন কিছুকে টেনে এনে ফেলে দেওয়া হবে। ট্যুরের প্রয়োজনীয়তার উপর নির্ভর করে, আপনি এমন কোনও ধারক দিয়ে বডি নির্বাচনকারীকে প্রতিস্থাপন করতে পারেন যা শিশুদের টেনে আনতে হবে না should

— ফুল
সূত্র

0

এটা চেষ্টা কর

$('#id').on('mousedown', function(event){
    event.preventDefault();
}

— crazyjune
সূত্র

0

জন্য inputউপাদান, এই উত্তর আমার জন্য কাজ করে।

আমি এঙ্গুলার 4 এ এটি একটি কাস্টম ইনপুট উপাদানটিতে প্রয়োগ করেছি, তবে আমি মনে করি এটি খাঁটি জেএস দিয়ে প্রয়োগ করা যেতে পারে।

এইচটিএমএল

<input type="text" [(ngModel)]="value" (ondragenter)="disableEvent($event)" 
(dragover)="disableEvent($event)" (ondrop)="disableEvent($event)"/>

উপাদান সংজ্ঞা (জেএস):

export class CustomInputComponent { 

  //component construction and attribute definitions

  disableEvent(event) {
    event.preventDefault();
    return false;
  }
}

— টিটো লেভা
সূত্র

0

@ সিনট্যাক্সেররের উত্তরটি ব্যবহার করে https://stackoverflow.com/a/13745199/5134043

আমি প্রতিক্রিয়াতে এটি করতে পরিচালিত করেছি; আমি যে উপায়টি বুঝতে পেরেছিলাম তা হ'ল অনড্রাস্টস্টার্ট এবং অনড্রপ পদ্ধতিগুলি কোনও রেফার সাথে সংযুক্ত করা, যেমন:

  const panelManagerBody = React.createRef<HTMLDivElement>();
  useEffect(() => {
    if (panelManagerBody.current) {
      panelManagerBody.current.ondragstart = () => false;
      panelManagerBody.current.ondrop = () => false;
    }
  }, [panelManagerBody]);

  return (
    <div ref={panelManagerBody}>

— kriskate
সূত্র

0

আমি শুধু এটি এখানে ছেড়ে দেব। আমি সবকিছু চেষ্টা করার পরে আমাকে সাহায্য করেছে।

   $(document.body).bind("dragover", function(e) {
        e.preventDefault();
        return false;
   });

   $(document.body).bind("drop", function(e){
        e.preventDefault();
        return false;
   });

— checknov
সূত্র

-1

এই JQuery আমার জন্য কাজ করেছে: -

$(document).ready(function() {
  $('#con_image').on('mousedown', function(e) {
      e.preventDefault();
  });
});

— পিযুষ
সূত্র