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

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

2 голосов
/ 30 мая 2020

Я хочу отключить перетаскивание всех изображений в моем проекте , который содержит большое количество изображений. В результате я нашел в сети отключение определенного изображения. Ввод draggable="false" внутри каждого тега изображения займет много времени. Поэтому мне нужно решение, чтобы отключить их вместе.

Мне удалось отключить перетаскивание с помощью этого кода, но он все еще перетаскивается в Firefox. 

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

Я уже прошел Отключить перетаскивание изображения со страницы HTML , но ответа на свой вопрос не нашел.

Ответы [ 2 ]

1 голос
/ 30 мая 2020

Вы можете добавить атрибут ondragstart к одному изображению & return false.

Если вы хотите адресовать несколько изображений 

const imgs = document.getElementsByTagName('img');
for(let i = 0; i < imgs.length; i++ ) {
    imgs[i].setAttribute("ondragstart", "return false")
}

Примечание от React Syntheti c events

Начиная с v0.14, возврат false из обработчика событий больше не останавливает распространение события. Вместо этого e.stopPropagation () или e.preventDefault () следует запускать вручную, в зависимости от ситуации.

Таким образом, вам нужно добавить к каждому изображению.

<img src={source} onDragStart={e => e.preventDefault()} />

1 голос
/ 30 мая 2020

Для указанного c изображения вы можете сделать что-то вроде этого, он будет работать на всех browsers

image

Если вы хотите, чтобы все ваши изображения не перетаскивались во всех браузерах, включая firefox, тогда несколько строк javascript могут сделать это за вас! 

// register onLoad event with anonymous function
window.onload = function(e) {
  var evt = e || window.event, // define event (cross browser)
    imgs, // images collection
    i; // used in local loop
  // if preventDefault exists, then define onmousedown event handlers
  if (evt.preventDefault) {
    // collect all images on the page
    imgs = document.getElementsByTagName('img');
    // loop through fetched images
    for (i = 0; i < imgs.length; i++) {
      // and define onmousedown event handler
      imgs[i].onmousedown = disableDragging;
    }
  }
};

// disable image dragging
function disableDragging(e) {
  e.preventDefault();
}
<img src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png">

<img src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png">

<img src="https://contribute.geeksforgeeks.org/wp-content/uploads/gfg-39.png">
...