Предотвращение перетаскивания или выбора изображения без использования JS


132

Кто-нибудь знает, как сделать изображение не перетаскиваемым и не выбираемым - в то же время - в Firefox, не прибегая к Javascript? Кажется тривиальным, но вот в чем проблема:

1) Можно перетащить и выделить в Firefox:

<img src="...">

2) Итак, мы добавляем это, но изображение все еще может быть выделено при перетаскивании:

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

3) Итак, мы добавляем это, чтобы исправить проблему с выделением, но затем, как ни странно, изображение снова стало перетаскиваемым. Странно, я знаю! Использование FF 16.0.1

<img src="..." draggable="false" style="-moz-user-select: none;">

Итак, кто-нибудь знает, почему добавление «-moz-user-select: none» каким-то образом перевешивает и отключает «draggable = false»? Конечно, webkit работает должным образом. В сети нет ничего об этом ... Было бы здорово, если бы мы вместе пролили свет на это.

Спасибо!!

Изменить: речь идет о предотвращении непреднамеренного перетаскивания элементов пользовательского интерфейса и улучшении удобства использования, а не о какой-то неубедительной попытке схемы защиты от копирования :-)


1
Я надеюсь, вы не думаете, что это помешает людям сохранить ваше изображение на диск. Любой, кто хоть немного понимает, как работают браузеры, сможет легко обойти это.
Джим Гаррисон

@JimGarrison, конечно, нет, извините, я должен был быть более конкретным, я стараюсь, чтобы некоторые из моих элементов пользовательского интерфейса не двигались, в правильном контексте это вредит удобству использования.
tmkly3

Вместо этого очень полезно, если у вас есть фоновые элементы, которые будут перетаскиваться на рабочий стол (или, что еще хуже, строки кода href в какой-то файл, открытый в фоновом режиме за окном браузера во время работы над ним!), Когда они находятся рядом с очень маленькими современными полосами прокрутки, а вы не попадайте в полосу ровно каждый раз при проверке свитков.
Гаравани

1
Оказалось, что это известная проблема в Firefox уже давно ( дубликат? )
Coderer

Ответы:


210

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

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

3
Спасибо, они у меня тоже есть, но проблема начинает выглядеть как ошибка в Firefox. Я думаю, что единственный способ решить эту проблему на данный момент - использовать Javascript.
tmkly3

Работает во всех браузерах.
Милад Абуали

Хорошо, так как мне сделать так, чтобы он не отображал никакого эффекта, но все же запускал событие перетаскивания?
Ty_

6
Я обнаружил, что все еще могу перетащить Firefox 47, но добавив ondragstart = "return false;" Масадоу; свойство к тегу изображения исправлено.
Эндрю Пэйт

3
Я все еще могу притащить хром
lonewarrior556

54

Я забыл поделиться своим решением, я не мог найти способ сделать это без использования JS. Есть некоторые угловые случаи, когда CSS, предложенный @Jeffery A Wooden, просто не покрывает.

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

CSS:

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

JS:

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

Это было намного сложнее, чем нужно.


1
$ (el) .on ('dragstart', функция (e) {e.preventDefault ();});
Pete B

3
Это также может быть написано <img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">для соответствия коду OP.
Masadow

39

Вы можете использовать pointer-eventsсвойство в своем CSS и установить для него значение «none».

img {
    pointer-events: none;
}

Edited

это заблокирует (щелкнет) событие. Лучшее решение было бы

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

1
В таком случае значок изображения будет вести себя больше как глификон, поэтому мне больше всего нравится этот метод.
Funkodebat

9
Это также делает непригодными для использования такие события, как (onclick) ... будьте осторожны, если используете этот подход.
Николя Бувретт

Этот ответ все еще действителен, пока принятый ответ не относится к последним версиям программного обеспечения. Это должен быть новый принятый ответ. @ tmkly3
progyammer

это создаст проблему, если у нас есть событие click для изображения. Он заблокирует событие щелчка
Pratap AK

12

В зависимости от ситуации часто бывает полезно сделать изображение фоновым изображением divс помощью CSS.

<div id='my-image'></div>

Затем в CSS:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

См. Этот JSFiddle для получения живого примера с кнопкой и другим параметром размера.


9

Вы могли бы просто прибегнуть к

<img src="..." style="pointer-events: none;">

Это должен быть принятый ответ, перетаскивание пользователя не поддерживается firefox. Спасибо тебе за это!
Merritt6616

Для меня тоже «указатель-события» был решением, потому что он работал в кросс-браузере («перетаскивание пользователем» не влияет на Firefox, по крайней мере, в 11.2018)
Дэвид Дал Буско,

2

Общее решение, особенно для браузера Windows Edge (как -ms-user-select: none; правило CSS не работает):

window.ondragstart = function() {return false}

Примечание. Это может избавить вас от необходимости добавлять draggable="false"к каждому imgтегу, когда вам все еще нужно событие щелчка (то есть вы не можете использовать pointer-events: none), но не хотите, чтобы отображалось изображение значка перетаскивания.


Единственный ответ, который действительно работает для меня! Не знаю, почему не проголосовали выше.
AldaronLau

1

Вы можете установить изображение в качестве фонового изображения. Поскольку он находится в a div, и его divнельзя будет перетаскивать, изображение будет недоступным для перетаскивания:

<div style="background-image: url("image.jpg");">
</div>

1

Я создал элемент div, который имеет тот же размер, что и изображение, и расположен поверх изображения . Тогда события мыши не попадают в элемент изображения.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.