在 firefox 插件弹出窗口中禁用任何对象的拖动

Question

我正在 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

Answer 1

禁用暴力拖动：

要在整个 popup/document 上禁用拖动，您可以执行以下任一操作：

将以下行添加到您的 popup.js 文件中：

function noDrag(event) {
    event.preventDefault();
}
document.addEventListener('dragstart',noDrag,true);

或将此行添加到 popup.js:

document.addEventListener('dragstart',function(event){event.preventDefault();},true);

或将popup.html中的<html>行改为：

<html ondragstart='event.preventDefault();'>

我个人的偏好是使用命名的 noDrag 函数。命名函数而不是闭包仅仅是因为在未来的某个时候，我可能想要选择哪些元素已禁用拖动。如果需要，将其命名允许重复使用相同的功能，或将其作为元素的侦听器删除。 JavaScript 而不是 HTML 因为 A) 你已经有一个用于弹出窗口的 JavaSctipt 文件和 B) 我对 onxxxxx 事件 attributes/properties 的看法是应该避免它们合理的时候。如果还没有与此弹出窗口关联的 JavaScript 文件，我将使用 HTML ondragstart 方法。

它应该如何工作：

以下不会禁用拖动 <a> 和 <img> 元素。规范和文档说它应该可以禁用拖动。我需要深入研究 Firefox 源代码以找出它不起作用的原因。

在 Firefox（和 HTML 规范）中，可拖动的元素由所有此类元素上的 draggable attribute. For images and links, the default value is true. For everything else, the default is false. You will either need to have draggable="false" on all such elements in your HTML, or use JavaScript to setAttribute('draggable',false), or element.draggable = false; 控制。

Firefox 没有 CSS 属性可用于控制元素是否可拖动。

有关详细信息，请参阅：

Preventing an image from being draggable or selectable without using JS
draggable
Drag Operations
HTML Drag and Drop API
WHATWG HTML Living Standard (The definition of draggable in that specification.)
HTML5.2 (The definition of 'draggable' in that specification.)

在 firefox 插件弹出窗口中禁用任何对象的拖动

Disable drag for any object in firefox addon popup

html

javascript

css

firefox-addon

firefox-addon-webextensions

禁用暴力拖动：

它应该如何工作：