Vô hiệu hóa kéo hình ảnh từ một trang HTML

194

Tôi cần phải đặt một hình ảnh trong trang của tôi. Tôi muốn tắt tính năng kéo hình ảnh đó. Tôi đang cố gắng rất nhiều thứ nhưng không có sự giúp đỡ. Có ai giúp tôi ra ngoài không ?

Tôi không muốn giữ hình ảnh đó làm hình nền vì tôi đang thay đổi kích thước hình ảnh.

— Người dùng 1034
nguồn

15

@AgentConundrum - Không có vấn đề gì với tôi nếu người dùng lưu và làm bất cứ điều gì anh ta muốn. Yêu cầu duy nhất của tôi là không kéo hình ảnh đó.

— Người dùng 1034

261

Bạn có thể thích điều này ...

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

Xem nó hoạt động (hoặc không hoạt động, thay vào đó)

Có vẻ như bạn đang sử dụng jQuery.

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

— alex
nguồn

9

@alex - Mục đích của việc không kéo hình ảnh là không lấy cắp hình ảnh. Mục đích hoàn toàn khác nhau. Tôi đang làm cho hình ảnh đó là có thể sắp xếp và có thể rơi. Vì vậy, phải mất một thời gian dài để giải thích nó.

— Người dùng 1034

2

@alex - ondragstart có độc lập với trình duyệt không?

— Người dùng 1034

1

@AdamMerrifield Hãy thử $(document)thay vì$(window)

— rybo111

2

Tôi vừa làm việc, bạn có thể đơn giản hóa jQuery thành:$('img').on('dragstart', false);

— rybo111

2

@alex Dưới xử lý:The value false is also allowed as a shorthand for a function that simply does return false.

— Adam Merrifield

174

Giải pháp chỉ CSS: sử dụng pointer-events: none

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

— mikhuang
nguồn

3

Nhưng điều này dẫn đến hiệu ứng lựa chọn kỳ lạ trong FF ít nhất. Tốt hơn vẫn là trả lại sai;

— Bhumi Singhal

nó không được sử dụng khi hình ảnh là liên kết.

— Nilesh tuần tra

3

Có vẻ như điều này sẽ không hoạt động trong IE (bất kỳ phiên bản nào) xem: caniuse.com/pulum-events

— Justin Tanner

8

Cũng là một CSS chỉ giải pháp: đặt một yếu tố trên các img.

— alex

6

-1! Điều này nên được sử dụng để ngăn chặn TẤT CẢ các sự kiện của nhà thơ (bao gồm kéo qua, như khi bạn muốn tải lên một hình ảnh). Sử dụng giải pháp javascript không phải là!

— chối Vitali

129

chỉ cần thêm draggable = "false" vào thẻ hình ảnh của bạn:

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

Tuy nhiên, IE8 và không hỗ trợ.

— dmo
nguồn

Tôi đang sử dụng Magento vì vậy div của tôi như: <div class = "sản phẩm-img-box"> <? Php echo $ this-> getChildHtml ('media')?> </ Div> Làm cách nào tôi có thể hạn chế nhấp chuột phải và không kéo được hình ảnh của tôi div. @dmo

— Đá quý

41

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

— Bến
nguồn

4

+1 Đừng hiểu các downvote. Đây không phải là giải pháp tối ưu, trong khi nó ngăn cản việc kéo tất cả, không chỉ là một hình ảnh đặc biệt. Nhưng nó cho thấy hướng đi đúng (và tôi nghĩ đó là câu trả lời đầu tiên thực hiện nó)

— Dr.Molle

@DrMolle Có thể nó đã đáp lại những bình luận (kể từ khi bị xóa) mà Steve để lại cho câu trả lời của tôi .

— alex

2

Hãy nhớ rằng đôi khi mọi người sẽ kéo một liên kết đến thanh dấu trang của họ - giải pháp này sẽ loại bỏ khả năng này.

— jClark

33

giải pháp trình duyệt chéo đơn giản nhất là

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

vấn đề với

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

là nó không hoạt động trong firefox

— imal hasaranga perera
nguồn

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

Tôi đã sử dụng nó trên trang web của mình tại http://www.namdevmatrimony.in/ Nó hoạt động như một phép màu !!! :)

— Namdev hôn nhân
nguồn

6

Nó có thể kéo được trong firefox

— Dean Christian Armada

24

Tôi đã thử bản thân mình và thấy điều này đang hoạt động.

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

Tôi chắc chắn điều này vô hiệu hóa kéo tất cả các hình ảnh. Không chắc chắn nó ảnh hưởng đến cái gì khác.

— Người dùng 1034
nguồn

3

Ah! Bạn nên đề cập rằng bạn đang sử dụng jQuery / có thể sử dụng jQuery. +1 để sử dụng jQuery.

— Alex

@alex - Tôi xin lỗi. Tôi đã tự thử nó. Và tôi không chắc nó có ảnh hưởng gì khác không.

— Người dùng 1034

bạn vẫn khỏe Không, theo như tôi biết, làm những gì bạn có ở đây không nên có bất kỳ ảnh hưởng tiêu cực nào đối với bất cứ điều gì khác.

— Alex

2

Điều gì nếu hình ảnh được bọc bên trong một <a>thẻ? Sau đó, nếu người dùng nhấp vào hình ảnh, liên kết sẽ không được nhấp vào.

— SeinopSys

Cảm ơn. Btw, điều này cũng hoạt động trong GWT với một `event.preventDefault ();`.

— Johanna

14

Xem câu trả lời này ; trong Chrome và Safari, bạn có thể sử dụng kiểu sau để tắt tính năng kéo mặc định:

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

Bạn có thể thử chọn người dùng cho Firefox và IE (10+):

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

— mhu
nguồn

11

Bạn có thể thêm các mục sau vào mỗi hình ảnh mà bạn không muốn có thể kéo được, (bên trong imgthẻ):

onmousedown="return false;"

ví dụ

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

— BOBO
nguồn

10

Mã này làm chính xác những gì bạn muốn. Nó ngăn hình ảnh kéo trong khi cho phép bất kỳ hành động nào khác phụ thuộc vào sự kiện.

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

— Robert
nguồn

9

Trực tiếp sử dụng này: ondragstart="return false;"trong thẻ hình ảnh của bạn.

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

Nếu bạn có nhiều hình ảnh, hãy bọc trên một <div>thẻ:

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

Hoạt động trong tất cả các trình duyệt chính.

— tháng một
nguồn

8

Vì hình ảnh của tôi được tạo bằng ajax và do đó không có sẵn trên windows.load.

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

Bằng cách này tôi có thể kiểm soát phần nào chặn hành vi, nó chỉ sử dụng một ràng buộc sự kiện và nó hoạt động cho các hình ảnh được tạo ra trong tương lai mà không phải làm gì cả.

Với jQuery onràng buộc mới :

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (cảm ơn @ialphan)

— hướng dẫn
nguồn

1

Sử dụng .on nó sẽ như thế này: $ (tài liệu) .on ('dragstart', 'img', function (e) {e.preventDefault ();});

— ialphan

Đây là giải pháp chính xác. Một sự kiện ràng buộc cho imgcác yếu tố không giới hạn , hiện tại hoặc tương lai. Ít nhất, mạnh mẽ nhất.

— gái

5

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

— Mù tạt
nguồn

4

Giải pháp tuyệt vời, có một vấn đề nhỏ với xung đột, Nếu bất kỳ ai khác có xung đột từ thư viện js khác chỉ đơn giản là không cho phép xung đột như vậy.

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

Mong rằng nó giúp ai đó thoát.

— Paul
nguồn

3

Chà tôi không biết câu trả lời ở đây có giúp được mọi người hay không, nhưng đây là một mẹo CSS nội tuyến đơn giản, chắc chắn sẽ giúp bạn vô hiệu hóa việc kéo và chọn văn bản trên trang HTML.

Trên <body>thẻ của bạn thêm ondragstart="return false". Điều này sẽ vô hiệu hóa kéo hình ảnh. Nhưng nếu bạn cũng muốn tắt lựa chọn văn bản thì hãy thêmonselectstart="return false" .

Mã sẽ trông như thế này: <body ondragstart="return false" onselectstart="return false">

— Abhisek
nguồn

3

Bạn có thể xem xét giải pháp của tôi là tốt nhất. Hầu hết các câu trả lời là không tương thích với các trình duyệt cũ như IE8 từ e.preventDefault () wont được hỗ trợ cũng như ondragstart sự kiện. Để làm điều đó tương thích với trình duyệt, bạn phải chặn sự kiện mousemove cho hình ảnh này. Xem ví dụ dưới đây:

jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

không có 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 });
}

đã thử nghiệm và làm việc ngay cả đối với IE8

— CodeGems
nguồn

3

Đặt các thuộc tính CSS sau cho hình ảnh:

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

— Omid Farvid
nguồn

1

Dường như không hoạt động trên Firefox (sử dụng Mac Firefox 69)

— Ben Wheeler

2

Chà, điều này là có thể, và các câu trả lời khác được đăng là hoàn toàn hợp lệ, nhưng bạn có thể thực hiện một cách tiếp cận vũ phu và ngăn chặn hành vi mặc định của mousedown hình ảnh. Mà, là bắt đầu kéo hình ảnh.

Một cái gì đó như thế này:

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

— Alex
nguồn

2

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

Hoạt động trong Plunker này http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

— dtothefp
nguồn

2

jQuery:

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

Bạn có thể thay thế bộ chọn cơ thể bằng bất kỳ vật chứa nào khác mà trẻ em muốn ngăn chặn bị kéo và rơi.

— Lis
nguồn

1

Bạn có thể sử dụng mã nội tuyến cho việc này

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

Mở rộng đoạn trích

Và tùy chọn thứ hai là sử dụng css bên ngoài hoặc trên trang

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">

Mở rộng đoạn trích

Cả hai đều hoạt động chính xác Tôi đang sử dụng css bên ngoài trên trang web này (Bấm vào đây)

— Abhishek kamal
nguồn

Cả hai thứ này dường như không hoạt động trên Firefox (sử dụng Mac Firefox 69)

— Ben Wheeler

1

Trả lời rất đơn giản:

<body oncontextmenu="return false"/>- vô hiệu hóa nhấp chuột phải <body ondragstart="return false"/>- vô hiệu hóa kéo chuột <body ondrop="return false"/>- vô hiệu hóa thả chuột

— Thu được
nguồn

-1

Tôi đã thực hiện các thuộc tính css được hiển thị ở đây cũng như theo dõi ondragstart với javascript sau:

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

— Lấy nét
nguồn

-2

Ăn cắp từ câu trả lời của riêng tôi , chỉ cần thêm một yếu tố hoàn toàn trong suốt có cùng kích thước trên hình ảnh. Khi bạn thay đổi kích thước hình ảnh của mình, hãy chắc chắn thay đổi kích thước phần tử.

Điều này sẽ làm việc cho hầu hết các trình duyệt, ngay cả những trình duyệt cũ hơn.

— Sablefoste
nguồn