3

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

4

1 回答 1

5

通过蛮力禁用拖动：

要禁用对整个弹出窗口/文档的拖动，您可以执行以下任一操作：

  • 将以下行添加到您的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 文件，我将使用 HTMLondragstart方法。

它应该如何工作：

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

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

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

有关更多信息，请参阅：

于 2016-08-12T02:22:19.173 回答