Отключить перетаскивание любого объекта во всплывающем окне надстройки Firefox

Я разрабатываю расширение для Chrome/Firefox, в котором есть всплывающее окно, состоящее из разных графических элементов. Я не хочу, чтобы пользователь перетаскивал эти элементы из этого всплывающего окна. Чтобы отключить перетаскивание в Chrome, я могу использовать этот код css:

* {
    user-drag: none;
    -ms-user-drag: none;
    -moz-user-drag: none;
    -webkit-user-drag: none;

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

    text-decoration: none;
}

Но это не работает в Firefox. Есть ли какой-нибудь атрибут css, который мог бы работать в этом случае?

Вот минимальная версия: https://drive.google.com/open?id=0B4k6nM18722gNjY5VjVpREhpRTQ


person Nucktrooper    schedule 11.08.2016    source источник


Ответы (1)


Отключить перетаскивание методом грубой силы:

Чтобы отключить перетаскивание всего всплывающего окна/документа, вы можете выполнить одно из следующих действий:

  • Добавьте следующие строки в файл popup.js:
function noDrag(event) {
    event.preventDefault();
}
document.addEventListener('dragstart',noDrag,true);
  • Или добавьте эту строку в popup.js:
document.addEventListener('dragstart',function(event){event.preventDefault();},true);
  • Или измените строку <html> в popup.html на:
<html ondragstart='event.preventDefault();'>

Лично я предпочитаю использовать названную функцию noDrag. Именованная функция вместо замыкания просто потому, что в какой-то момент в будущем я, возможно, захочу быть избирательным в отношении того, для каких элементов отключено перетаскивание. Наличие имени позволяет повторно использовать одну и ту же функцию или удалять ее в качестве слушателя из элемента, если это желательно. JavaScript вместо HTML, потому что A) у вас уже есть файл JavaSctipt для всплывающего окна и B) мое мнение об атрибутах/свойствах onxxxxx состоит в том, что их следует избегать, когда это разумно. Если бы с этим всплывающим окном еще не был связан файл JavaScript, я бы использовал метод HTML ondragstart.

Как это должно работать:

Следующее не отключает перетаскивание элементов <a> и <img>. Спецификации и документация говорят, что это должно работать, чтобы отключить перетаскивание. Мне нужно углубиться в исходный код Firefox, чтобы понять, почему он не работает.

В Firefox (и спецификации HTML) перетаскиваемый элемент управляется draggable атрибут. Для изображений и ссылок значение по умолчанию — true. Для всего остального по умолчанию false. Вам понадобится либо draggable="false" для всех таких элементов в вашем HTML, либо используйте JavaScript для setAttribute('draggable',false), либо element.draggable = false; для всех таких элементов.

Firefox не имеет свойства CSS, которое можно использовать для управления возможностью перетаскивания элемента.

Для получения дополнительной информации см.:

person Makyen♦    schedule 12.08.2016
comment
Атрибут draggable, похоже, не работает для расширений во всплывающем окне. Независимо от того, использую ли я его в JS или HTML, элементы по-прежнему можно перетаскивать. - person Nucktrooper; 12.08.2016
comment
@Nucktrooper, предоставьте минимально воспроизводимый пример расширения, открывающего панель, где у вас есть такая проблема, поэтому мы может дублировать проблему. - person Makyen♦; 12.08.2016
comment
К вопросу добавлена ​​минимальная версия. - person Nucktrooper; 13.08.2016
comment
@Nucktrooper, спасибо за MCVE. Я обновил ответ проверенным и работающим методом грубой силы, чтобы отключить перетаскивание всего всплывающего окна. - person Makyen♦; 13.08.2016