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

Question

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

кто-нибудь знает способ сделать изображение не перетаскиваемым и не выбираемым-в то же время-в 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 работает так, как ожидалось. Ничего нет там на паутине о this...It было бы здорово, если бы мы могли пролить свет на это вместе.

спасибо!!

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

680 7

html css html5 firefox draggable

7 ответов:

Comments

Ничего не найдено.

Jeff Wooden · Accepted Answer · 2016-07-30 19:34:28

установите следующие свойства CSS для изображения:
user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

tmkly3 · Accepted Answer · 2012-11-16 01:12:34

Я забыл поделиться своим решением, я не мог найти способ сделать это без использования JS. Есть некоторые угловые случаи ,когда @ 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;
}

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' ); 
};
Это было намного сложнее, чем должно было быть.

Linh Dam · Accepted Answer · 2018-01-31 12:22:55

можно использовать pointer-events свойство в вашем CSS, и установите его равным 'none'
img {
    pointer-events: none;
}
редактировать

это будет блокировать (нажмите) событие. Так что лучшим решением было бы
<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;
}

Nick Merrill · Accepted Answer · 2013-06-20 19:45:56

в зависимости от ситуации, часто бывает полезно сделать изображение фоновое изображение div С помощью CSS.
<div id='my-image'></div>
затем в CSS:
#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}
посмотреть этот JSFiddle для живого примера с кнопкой и другой опцией калибровки.

Thomas Bachem · Accepted Answer · 2014-11-07 02:46:53

вы могли бы просто прибегнуть к
<img src="..." style="pointer-events: none;">

joshua pogi 28 · Accepted Answer · 2014-12-22 08:35:57

вы можете установить изображение в качестве фонового изображения. Так как он находится в div и div undraggable, изображение будет undraggable:
<div style="background-image: url("image.jpg");">
</div>

Philip Murphy · Accepted Answer · 2017-09-14 13:18:45

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