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.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事件属性/属性的看法是在合理的时候应该避免它们。如果还没有与此弹出窗口关联的JavaScript文件，我将使用HTML ondragstart方法。

它应该如何工作：

以下内容不会禁用对<a>和<img>元素的拖动。规范和文档说它应该用于禁用拖动。我需要深入研究Firefox源代码，找出它无法正常工作的原因。

在Firefox（和HTML规范）中，可拖动的元素由draggable attribute控制。对于图像和链接，默认值为true。对于其他所有内容，默认值为false。您需要在HTML中的所有此类元素上使用draggable="false"，或在所有此类元素上使用JavaScript setAttribute('draggable',false)或element.draggable = false;。

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

有关详细信息，请参阅：

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

1 个答案:

禁用通过蛮力拖动：

它应该如何工作：