ปิดการใช้งานการลากภาพจากหน้า HTML

195

ฉันต้องใส่ภาพในหน้าของฉัน ฉันต้องการปิดการใช้งานการลากภาพนั้น ฉันพยายามหลายสิ่งหลายอย่าง แต่ไม่ช่วย ใครสามารถช่วยฉันออก

ฉันไม่ต้องการเก็บภาพนั้นเป็นภาพพื้นหลังเพราะฉันกำลังปรับขนาดภาพ

15

@AgentConundrum - ไม่มีปัญหาสำหรับฉันหากผู้ใช้บันทึกและทำสิ่งที่เขาต้องการ ข้อกำหนดเพียงอย่างเดียวของฉันคือไม่ต้องลากภาพนั้น

— ผู้ใช้ 1034

264

คุณชอบสิ่งนี้ ...

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

ดูว่ามันใช้งานได้ (หรือไม่ทำงานแทน)

ดูเหมือนว่าคุณกำลังใช้ jQuery

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

— อเล็กซ์
แหล่งที่มา

9

@alex - จุดประสงค์ในการลากภาพไม่ได้เป็นการขโมยภาพ จุดประสงค์นั้นแตกต่างอย่างสิ้นเชิง ฉันกำลังทำให้ภาพนั้นเรียงได้และจัดเรียงได้ ดังนั้นจึงใช้เวลานานในการอธิบาย

— ผู้ใช้ 1034

2

@alex - ondragstart เป็นเบราว์เซอร์ที่เป็นอิสระหรือไม่

— ผู้ใช้ 1034

1

@AdamMerrifield ลองใช้$(document)แทน$(window)

— rybo111

2

ฉันเพิ่งออกกำลังกายคุณสามารถทำให้ jQuery ง่ายขึ้น:$('img').on('dragstart', false);

— rybo111

2

@alex Under handler:The value false is also allowed as a shorthand for a function that simply does return false.

— Adam Merrifield

174

วิธีแก้ปัญหา CSS เท่านั้น: ใช้ pointer-events: none

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

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

3

แต่สิ่งนี้นำไปสู่เอฟเฟกต์แปลก ๆ ใน FF atleast ยังดีกว่ากลับเท็จ

— Bhumi Singhal

มันไม่ได้ใช้เมื่อรูปภาพเป็นลิงค์

— Nilesh patel

3

ดูเหมือนว่าสิ่งนี้จะไม่ทำงานใน IE (ทุกรุ่น) ดู: caniuse.com/pointer-events

— Justin Tanner

8

นอกจากนี้ยังมีCSS เพียงการแก้ปัญหา: วางองค์ประกอบมากกว่า img

— alex

6

-1! สิ่งนี้ควรใช้เพื่อป้องกันเหตุการณ์ ponter ทั้งหมด (รวมถึงการลากผ่านเช่นเมื่อคุณต้องการอัปโหลดรูปภาพ) ใช้โซลูชัน javascript isntead!

— Denys Vitali

130

เพียงเพิ่ม draggable = "false" ลงในแท็กรูปภาพของคุณ:

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

IE8 และรุ่นต่ำกว่าไม่รองรับ

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

ฉันใช้ Magento ดังนั้น div ของฉันชอบ: <div class = "product-img-box"> <? php echo $ this-> getChildHtml ('media')?> </div> ฉันจะ จำกัด การคลิกขวาและไม่สามารถลากได้ div ภาพของฉัน @dmo

— อัญมณี

41

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

— เบน
แหล่งที่มา

4

+1 ไม่เข้าใจคะแนนโหวต มันไม่ใช่ทางออกที่ดีที่สุดในขณะที่มันป้องกันการลากทั้งหมดไม่ใช่เฉพาะภาพพิเศษ แต่มันแสดงให้เห็นถึงทิศทางที่ถูกต้อง (และฉันคิดว่านี่เป็นคำตอบแรกที่ทำได้)

— Dr.Molle

@DrMolle มันอาจจะได้รับในการตอบสนองต่อ (ตั้งแต่ลบ) ความเห็นที่เหลือโดยสตีฟในคำตอบของฉัน

— alex

2

โปรดจำไว้ว่าบางครั้งผู้คนจะลากลิงก์ไปยังแถบบุ๊คมาร์ค - โซลูชันนี้จะลบความสามารถนี้

— jClark

33

วิธีแก้ปัญหาข้ามเบราว์เซอร์ที่ง่ายที่สุดคือ

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

มันไม่ทำงานใน firefox

— imal hasaranga perera
แหล่งที่มา

25

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.namdevmatrimony.in/ มันใช้งานได้เหมือนเวทมนตร์ !!! :)

— Namdev การแต่งงาน
แหล่งที่มา

6

มันสามารถลากได้ใน firefox

— Dean Christian Armada

24

ฉันลองตัวเองและพบว่ามันใช้งานได้

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

ฉันแน่ใจว่านี่เป็นการปิดการใช้งานการลากภาพทั้งหมด ไม่แน่ใจว่ามันมีผลกระทบอย่างอื่น

— ผู้ใช้ 1034
แหล่งที่มา

3

อา! คุณควรบอกว่าคุณใช้ jQuery / สามารถใช้ jQuery ได้ +1 สำหรับการใช้ jQuery

— อเล็กซ์

@alex - ฉันขอโทษ ฉันพยายามด้วยตัวเอง และฉันไม่แน่ใจว่ามันมีผลกระทบอย่างอื่น

— ผู้ใช้ 1034

คุณสบายดี! ไม่เท่าที่ฉันรู้การทำสิ่งที่คุณมีอยู่ที่นี่ไม่ควรมีผลเสียต่อสิ่งอื่นใด

— อเล็กซ์

2

เกิดอะไรขึ้นถ้าภาพถูกห่อไว้ภายใน<a>แท็ก? จากนั้นหากผู้ใช้คลิกที่ภาพลิงค์จะไม่ได้รับการคลิก

— SeinopSys

ขอบคุณ Btw สิ่งนี้ยังทำงานใน GWT ด้วย `event.preventDefault (); '

— Johanna

14

เห็นนี้คำตอบ ; ใน Chrome และ Safari คุณสามารถใช้สไตล์ต่อไปนี้เพื่อปิดการใช้งานการลากเริ่มต้น:

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

คุณสามารถลองเลือกผู้ใช้สำหรับ Firefox และ IE (10+):

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

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

11

คุณสามารถเพิ่มสิ่งต่อไปนี้ในแต่ละภาพที่คุณไม่ต้องการลากไปมาได้ (ภายในimgแท็ก):

onmousedown="return false;"

เช่น

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

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

10

รหัสนี้ทำสิ่งที่คุณต้องการ มันป้องกันภาพจากการลากในขณะที่อนุญาตการกระทำอื่น ๆ ที่ขึ้นอยู่กับเหตุการณ์

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

— โรเบิร์ต
แหล่งที่มา

9

ใช้สิ่งนี้โดยตรง: ondragstart="return false;"ในแท็กรูปภาพของคุณ

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

หากคุณมีหลายภาพให้ใส่ใน<div>แท็ก:

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

ใช้งานได้ในเบราว์เซอร์หลัก ๆ ทั้งหมด

— ม.ค.
แหล่งที่มา

8

ตั้งแต่ภาพของฉันถูกสร้างขึ้นโดยใช้ Ajax และดังนั้นจึงไม่สามารถใช้ได้ใน windows.load

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

วิธีนี้ฉันสามารถควบคุมส่วนที่บล็อกพฤติกรรมได้เพียงใช้การเชื่อมโยงเหตุการณ์เดียวเท่านั้นและใช้ได้กับ ajax ที่สร้างภาพในอนาคตโดยไม่ต้องทำอะไรเลย

ด้วย jQuery ใหม่ที่onมีผลผูกพัน:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (ขอบคุณ @ialphan)

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

1

การใช้. on จะเป็นดังนี้: $ (document) .on ('dragstart', 'img', function (e) {e.preventDefault ();});

— ialphan

นี่คือทางออกที่ถูกต้อง หนึ่งเหตุการณ์ผูกพันสำหรับimgองค์ประกอบไม่ จำกัดปัจจุบันหรืออนาคต เข้มข้นน้อยที่สุดแข็งแกร่งที่สุด

— แฟน

5

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

— มุสตาฟา
แหล่งที่มา

4

ทางออกที่ดีมีปัญหาเล็ก ๆ น้อย ๆ ที่มีความขัดแย้งหากใครที่มีข้อขัดแย้งจากห้องสมุด js อื่นก็ไม่ทำให้เกิดความขัดแย้งเช่นนั้น

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

หวังว่านี่จะช่วยให้ใครบางคนออกมา

— พอล
แหล่งที่มา

3

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

คุณเพิ่มแท็ก<body> ondragstart="return false"วิธีนี้จะปิดใช้งานการลากรูปภาพ onselectstart="return false"แต่ถ้าคุณยังต้องการที่จะปิดการใช้งานการเลือกข้อความแล้วเพิ่ม

รหัสจะมีลักษณะดังนี้: <body ondragstart="return false" onselectstart="return false">

— Abhisek Das
แหล่งที่มา

3

คุณอาจพิจารณาโซลูชันของฉันดีที่สุด คำตอบส่วนใหญ่ไม่เข้ากันได้กับเบราว์เซอร์เก่าเช่น IE8 เนื่องจากe.preventDefault ()จะไม่ได้รับการสนับสนุนเช่นเดียวกับเหตุการณ์ondragstart ในการที่จะเข้ากันได้กับเบราว์เซอร์คุณต้องปิดกั้นเหตุการณ์mousemoveสำหรับภาพนี้ ดูตัวอย่างด้านล่าง:

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

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

3

ตั้งค่าคุณสมบัติ CSS ต่อไปนี้เป็นรูปภาพ:

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

— Omid Farvid
แหล่งที่มา

1

ดูเหมือนจะไม่ทำงานบน Firefox (โดยใช้ Mac Firefox 69)

— Ben Wheeler

2

เป็นไปได้และคำตอบอื่น ๆ ที่โพสต์นั้นถูกต้องสมบูรณ์แบบ แต่คุณสามารถใช้วิธีการเดรัจฉานบังคับและป้องกันพฤติกรรมเริ่มต้นของmousedownภาพ ซึ่งจะเริ่มลากภาพ

บางสิ่งเช่นนี้

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

— อเล็กซ์
แหล่งที่มา

2

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

ทำงานได้ใน Plunker นี้http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

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

2

คุณสามารถใช้รหัสแบบอินไลน์สำหรับสิ่งนี้

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

ขยายตัวอย่างข้อมูล

และตัวเลือกที่สองคือการใช้ CSS ภายนอกหรือบนหน้า

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 ภายนอกในเว็บไซต์นี้(คลิกที่นี่)

— Abhishek kamal
แหล่งที่มา

ทั้งสองอย่างดูเหมือนจะทำงานบน Firefox (โดยใช้ Mac Firefox 69)

— Ben Wheeler

2

jQuery:

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

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

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

1

คำตอบนั้นง่าย:

<body oncontextmenu="return false"/>- ปิดการใช้งานคลิกขวา <body ondragstart="return false"/>- ปิดการใช้งานการลากเมาส์ <body ondrop="return false"/>- ปิดการใช้งานการวางเมาส์

— ได้รับ
แหล่งที่มา

-1

ฉันทำคุณสมบัติ CSS ที่แสดงที่นี่เช่นเดียวกับการตรวจสอบ ondragstart ด้วยจาวาสคริปต์ต่อไปนี้:

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

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

-2

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

สิ่งนี้ควรใช้กับเบราว์เซอร์ส่วนใหญ่หรือแม้แต่เบราว์เซอร์ที่เก่ากว่า

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