ปิดใช้งานการลากและวางในองค์ประกอบ HTML หรือไม่

109

ฉันกำลังทำงานเกี่ยวกับแอปพลิเคชันบนเว็บที่ฉันกำลังพยายามใช้ระบบหน้าต่างที่มีคุณสมบัติครบถ้วน ตอนนี้กำลังไปได้ดีฉันพบปัญหาเล็กน้อยเพียงเรื่องเดียว บางครั้งเมื่อฉันลากส่วนหนึ่งของแอปพลิเคชันของฉัน (ส่วนใหญ่มักจะเป็น div มุมของหน้าต่างซึ่งควรจะเรียกใช้การดำเนินการปรับขนาด) เว็บเบราว์เซอร์จะฉลาดขึ้นและคิดว่าฉันหมายถึงการลากและวางบางสิ่ง ผลลัพธ์สุดท้ายการกระทำของฉันถูกพักไว้ในขณะที่เบราว์เซอร์ทำการลากและวาง

มีวิธีง่ายๆในการปิดการลากและวางของเบราว์เซอร์หรือไม่? ฉันอยากจะปิดมันได้ในขณะที่ผู้ใช้คลิกที่องค์ประกอบบางอย่าง แต่ให้เปิดใช้งานอีกครั้งเพื่อให้ผู้ใช้ยังคงสามารถใช้ฟังก์ชันการทำงานปกติของเบราว์เซอร์กับเนื้อหาในหน้าต่างของฉันได้ ฉันใช้ jQuery และแม้ว่าฉันจะไม่พบมันในการเรียกดูเอกสาร แต่ถ้าคุณรู้วิธีแก้ปัญหา jQuery ที่แท้จริงมันจะดีมาก

กล่าวโดยย่อ: ฉันจำเป็นต้องปิดการใช้งานการเลือกข้อความของเบราว์เซอร์และฟังก์ชันลากแล้วปล่อยในขณะที่ผู้ใช้ของฉันกดปุ่มเมาส์ลงและเรียกคืนฟังก์ชันนั้นเมื่อผู้ใช้ปล่อยเมาส์

— Nicholas Flynt
แหล่งที่มา

2

ฉันจะส่งเสริมว่าคำตอบของ @ SyntaxError (ด้านล่าง 100+ โหวต) ควรเป็นคำตอบที่เลือกเนื่องจากไม่มีผลต่อการดำเนินการที่ไม่ใช่การลาก

— Shaun Wilson

78

ลองป้องกันค่าเริ่มต้นของเหตุการณ์ที่มีการเลื่อนเมาส์:

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

หรือ

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

— Sergey Ilinsky
แหล่งที่มา

2

+1 - อย่างไรก็ตามสิ่งนี้มีผลข้างเคียงที่น่าเสียดายใน Firefox (6.0 และต่ำกว่า) ซึ่งจะป้องกันไม่ให้:activeใช้คลาสหลอกกับองค์ประกอบ ซึ่งหมายความว่าฉันไม่สามารถใช้กับลิงก์ของฉันได้

— Andy E

3

ขออภัยนี่แย่มาก ดูคำตอบด้านล่าง

— Madbreaks

217

สิ่งนี้ได้ผล ..... ลองดู

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

หวังว่ามันจะช่วยได้ ขอบคุณ

— SyntaxError
แหล่งที่มา

6

ใช้งานได้ดี! (สามารถวางแอตทริบิวต์ไว้บน<div>องค์ประกอบได้เช่นกัน)

— VasiliNovikov

4

โหวตให้กับคำตอบนี้ IMO คำตอบสำหรับการเลื่อนเมาส์สั้นเกินไป (คุณสามารถใช้เหตุการณ์การเลื่อนเมาส์สำหรับกรณีอื่น ๆ ได้) คำตอบนี้ใช้ได้ดีอย่างสมบูรณ์ :)

— Daniel van Dommele

4

นี่เป็นคำตอบที่ดีกว่ามากการมี 'PreventDefault ()' บนเมาส์ลงมีผลข้างเคียงมากเกินไป (เช่นการป้องกันไม่ให้โฟกัส / ไม่โฟกัสของอินพุตข้อความในแบบฟอร์ม)

— Jecimi

นี่ควรเป็นคำตอบที่ได้รับการยอมรับเนื่องจากจะไม่มีผลต่อการคลิก

— rafaelmorais

สิ่งนี้ควบคู่ไปกับcopy pasteผู้ฟังดูเหมือนจะเป็นวิธีแก้ปัญหาที่สมบูรณ์แบบในการบังคับให้ผู้ใช้พิมพ์ข้อมูลเข้าแทนที่จะวาง / ลากบางสิ่งเข้าไปโดยไม่ส่งผลเสียต่อส่วนอื่น ๆ ของหน้า

— Daniel Bonnell

21

คุณสามารถปิดการลากได้ง่ายๆโดยใช้draggable="false"แอตทริบิวต์
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
แหล่งที่มา

ทำงานได้อย่างมีเสน่ห์ใน Chrome 59

— kashiraja

1

นี่ควรเป็นคำตอบที่ยอมรับไม่ใช่ JS ซึ่งเป็นแอตทริบิวต์ HTML แบบง่ายซึ่งรองรับในทุกเบราว์เซอร์: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— chris

1

นี่คือคำตอบที่ดีที่สุด

— Argun

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;
}

แน่นอนสำหรับเบราว์เซอร์รุ่นใหม่เท่านั้น ตรวจสอบรายละเอียดเพิ่มเติม:

วิธีปิดการใช้งานการเน้นการเลือกข้อความโดยใช้ CSS

— ทช
แหล่งที่มา

ขอบคุณมาก. ฉันต้องการคลิกdivได้ แต่ปิดใช้งานการลาก

— IonicăBizău

@ IonicăBizăuหากคุณต้องการทำให้สิ่งต่างๆสามารถคลิกได้การใช้ปุ่มหรือแท็กจะดีกว่าเนื่องจากอุปกรณ์บางอย่างที่ไม่มีเมาส์และหน้าจอสัมผัสจะจดจำสิ่งเหล่านี้และทำให้สามารถเลือกได้สำหรับผู้ใช้

— ติดสาย

8

ด้วย jQuery มันจะเป็นดังนี้:

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

ในกรณีของฉันฉันต้องการปิดการใช้งานผู้ใช้จากการส่งข้อความในอินพุตดังนั้นฉันจึงใช้ "drop" แทน "mousedown"

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

แทน event.preventDefault () คุณสามารถส่งคืนเท็จ นี่คือความแตกต่าง

และรหัส:

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

— วิกเตอร์โรมาโน
แหล่งที่มา

2

นี่คือซอที่ฉันใช้กับเว็บแอปพลิเคชันของฉันเสมอ:

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

จะป้องกันไม่ให้สิ่งใด ๆ ในแอปของคุณถูกลากและวาง ขึ้นอยู่กับความต้องการของทัวร์คุณสามารถแทนที่ตัวเลือกร่างกายด้วยภาชนะใดก็ได้ที่ไม่ควรลากเด็ก

— ลิส
แหล่งที่มา

0

ลองดู

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

— บ้าจูน
แหล่งที่มา

0

สำหรับinputองค์ประกอบคำตอบนี้ใช้ได้กับฉัน

ฉันติดตั้งบนคอมโพเนนต์อินพุตที่กำหนดเองใน Angular 4 แต่ฉันคิดว่ามันสามารถใช้กับ JS บริสุทธิ์ได้

HTML

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

นิยามส่วนประกอบ (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

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

— ติโตเลว่า
แหล่งที่มา

0

โดยใช้คำตอบของ @ SyntaxError https://stackoverflow.com/a/13745199/5134043

ฉันจัดการเพื่อทำสิ่งนี้ใน React; วิธีเดียวที่ฉันคิดได้คือแนบเมธอด ondragstart และ ondrop เข้ากับการอ้างอิงดังนี้:

  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();
  });
});

— พิยุช
แหล่งที่มา