Вимкнути перетягування зображення зі сторінки HTML

195

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

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

— Користувач 1034
джерело

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 Під обробником:The value false is also allowed as a shorthand for a function that simply does return false.

— Адам Мерріфілд

174

Рішення лише для CSS: використання pointer-events: none

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

— мікхуанг
джерело

3

Але це призводить до дивного ефекту відбору у FF atleast. Ще краще повернути помилкове;

— Bhumi Singhal

він не використовується, коли зображення як посилання.

— Нілеш патель

3

Схоже, це не буде працювати в IE (будь-яка версія) див.: Caniuse.com/pointer-events

— Джастін Таннер

8

Також CSS тільки рішення: помістити елемент надimg .

— alex

6

-1! Це слід використовувати для запобігання ВСІХ подій понтера (включаючи перетягування, наприклад, коли ви хочете завантажити зображення). Використовуйте рішення 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> Як я можу обмежити клацання правою кнопкою миші та відсутність перетягування мій образ дів. @dmo

— Gem

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/ Це працює як магія !!! :)

— Намдєве подружжя
джерело

6

Це перетягування у firefox

— Дін Крістіан Армада

24

Я спробував себе і виявив, що це працює.

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

Я впевнений, що це відключає перетягування всіх зображень. Не впевнений, що це впливає на щось інше.

— Користувач 1034
джерело

3

Ах! Ви мусили згадати, що ви використовуєте jQuery / міг би використовувати jQuery. +1 за використання jQuery.

— Олексій

@alex - мені шкода. Я спробував це сам. І я не впевнений, що це впливає на щось інше.

— Користувач 1034,

у тебе все добре! Ні, наскільки я знаю, те, що ви маєте тут, не повинно мати жодного негативного впливу на щось інше.

— Олексій

2

Що робити, якщо зображення загорнуте всередину <a>тегу? Тоді якщо користувач натисне зображення, посилання не буде натиснуто.

— SeinopSys

Дякую. Btw, це також працює в GWT з `event.preventDefault ();`.

— Йоганна

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

— мху
джерело

11

Ви можете додати наступне до кожного зображення, яке ви не бажаєте перетягувати, (всередині imgтегу):

onmousedown="return false;"

напр

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

— БОБО
джерело

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, не вимагаючи нічого робити.

З новою onприв'язкою jQuery :

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

— гузарт
джерело

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

— Абхісек Дас
джерело

3

Ви можете вважати моє рішення найкращим. Більшість відповідей не сумісні зі старими браузерами, такими як IE8 e.preventDefault () не буде підтримуватися, як і подія ondragstart . Щоб зробити це сумісним із браузером, ви повинні заблокувати подію переміщення миші для цього зображення. Дивіться приклад нижче:

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;

— Омід Фарвід
джерело

1

Здається, не працює на Firefox (використовуючи Mac Firefox 69)

— Бен Уілер

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 на цьому сайті (натисніть тут)

— Абхішек камал
джерело

Жоден з них, здається, не працює на Firefox (за допомогою Mac Firefox 69)

— Бен Уілер

2

jQuery:

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

Ви можете замінити перемикач кузова будь-яким іншим контейнером, який діти, які ви хочете запобігти їх перетягуванню та опусканню.

— Ліс
джерело

1

Відповідь проста:

<body oncontextmenu="return false"/>- відключити клацання правою кнопкою миші <body ondragstart="return false"/>- відключити перетягування миші <body ondrop="return false"/>- відключити падіння миші

— Зробити
джерело

-1

Я зробив властивості css, показані тут, а також монітор ondragstart за допомогою наступного javascript:

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

— Алокус
джерело

-2

Викрадаючи мою власну відповідь , просто додайте абсолютно прозорий елемент такого ж розміру над зображенням. Змінюючи розмір зображення, не забудьте змінити розмір елемента.

Це має працювати для більшості браузерів, навіть для старих.

— Sablefoste
джерело