Отключить перетаскивание изображения со страницы HTML - PullRequest
Новая
       49

Отключить перетаскивание изображения со страницы HTML

188 голосов
/ 18 ноября 2010

Мне нужно разместить изображение на моей странице. Я хочу отключить перетаскивание этого изображения. Я пытаюсь много вещей, но без помощи. Кто-нибудь может мне помочь?

Я не хочу сохранять это изображение как фоновое изображение, потому что я изменяю размер изображения.

Ответы [ 23 ]

9 голосов
/ 03 сентября 2015

Непосредственно используйте это: 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 голосов
/ 09 февраля 2012

Поскольку мои изображения были созданы с использованием ajax и поэтому недоступны на windows.load.

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

Таким образом, я могу контролировать, какой раздел блокирует поведение, он использует только одинпривязка к событиям, и она работает для будущих изображений, созданных ajax, без необходимости что-либо делать.

С jQuery new on привязка:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (спасибо @ialphan)

4 голосов
/ 12 апреля 2017

Установите следующие свойства CSS для изображения: 

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
4 голосов
/ 04 ноября 2011

Отличное решение, была одна небольшая проблема с конфликтами. Если у кого-то еще есть конфликт из другой библиотеки js, просто включите отсутствие конфликта, как это. 

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

Надеюсь, это кому-нибудь поможет.

3 голосов
/ 20 ноября 2014 
<img draggable="false" src="images/testimg1.jpg" alt=""/>
3 голосов
/ 17 ноября 2014

Ну, я не знаю, помогли ли ответы здесь всем или нет, но вот простой встроенный трюк CSS, который определенно поможет вам отключить перетаскивание и выбор текста на странице HTML.

На ваш тег <body> добавьте ondragstart="return false". Это отключит перетаскивание изображений. Но если вы также хотите отключить выделение текста, добавьте onselectstart="return false".

Код будет выглядеть так: <body ondragstart="return false" onselectstart="return false">

2 голосов
/ 20 июля 2015

Вы можете считать мое решение лучшим.Большинство ответов не совместимы со старыми браузерами, такими как 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

2 голосов
/ 18 ноября 2010

Что ж, это возможно, и другие опубликованные ответы совершенно верны, но вы можете использовать метод грубой силы и предотвратить поведение по умолчанию mousedown на изображениях. Который, чтобы начать перетаскивание изображения.

Примерно так: 

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};
2 голосов
/ 04 июня 2014 
document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

Работает в этом Плункере http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

0 голосов
/ 11 июля 2019

Ответ прост:

<body oncontextmenu="return false"/> - отключить щелчок правой кнопкой мыши <body ondragstart="return false"/> - отключить перетаскивание мышью <body ondrop="return false"/> - отключить падение мыши

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...