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

Question

I am developping an extension on Chrome / Firefox which has a popup composed of different graphic elements.我正在 Chrome / Firefox 上开发一个扩展，它有一个由不同图形元素组成的弹出窗口。 I don't want user to drag and drop these items from this popup.我不希望用户从此弹出窗口中拖放这些项目。 To disable drag in Chrome, I can use this css code:要在 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;
}

But this doesn't work in Firefox.但这在 Firefox 中不起作用。 Is there any css attribute which could work in this case?是否有任何 css 属性可以在这种情况下工作？

Here is a minimal version: https://drive.google.com/open?id=0B4k6nM18722gNjY5VjVpREhpRTQ这是一个最小版本： https : //drive.google.com/open?id=0B4k6nM18722gNjY5VjVpREhpRTQ

Answer 1

Disable Dragging via Brute Force:通过蛮力禁用拖动：

To disable dragging on the entire popup/document, you can do any one of the following:要禁用对整个弹出窗口/文档的拖动，您可以执行以下任一操作：

Add the following lines to your popup.js file:将以下行添加到您的popup.js文件中：

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

Or add this line to popup.js :或者将此行添加到popup.js ：

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

Or change the <html> line in popup.html to:或者将popup.html 中的<html>行更改为：

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

My personal preference is to use the named noDrag function.我个人的偏好是使用命名的noDrag函数。 The named function instead of the closure merely because, at some point in the future, I might want to be selective about which elements have drag disabled.命名函数而不是闭包仅仅是因为，在未来的某个时候，我可能想要选择哪些元素已禁用拖动。 Having it named allows the same function to be re-used, or removed as a listener from an element, should that be desirable.如果需要，命名它允许重用相同的函数，或从元素中删除作为侦听器。 The JavaScript instead of the HTML because A) you already have a JavaSctipt file for the popup and B) my opinion of the onxxxxx event attributes/properties is that they should be avoided when reasonable. JavaScript 而不是 HTML，因为 A) 你已经有一个用于弹出窗口的 JavaSctipt 文件，B) 我对onxxxxx事件属性/属性的onxxxxx是，在合理的情况下应该避免它们。 If there was not already a JavaScript file associated with this popup, I would use the HTML ondragstart method.如果还没有与此弹出窗口关联的 JavaScript 文件，我将使用 HTML ondragstart方法。

How it is supposed to work:它应该如何工作：

The following does not disable dragging on <a> and <img> elements.以下内容不会禁用<a>和<img>元素上的拖动。 The specs and documentation say that it is supposed to work to disable dragging.规范和文档说它应该可以禁用拖动。 I need to delve further into the Firefox source code to figure out why it is not working.我需要深入研究 Firefox 源代码以找出它不工作的原因。

In Firefox (and the HTML specification), the element being draggable is controlled by the draggable attribute .在 Firefox（和 HTML 规范）中，可拖动元素由draggable属性控制。 For images and links, the default value is true .对于图像和链接，默认值为true 。 For everything else, the default is false .对于其他所有内容，默认值为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;您需要在 HTML 中的所有此类元素上使用draggable="false" ，或者使用 JavaScript 来setAttribute('draggable',false)或element.draggable = false; on all such elements.在所有这些元素上。

Firefox does not have a CSS property which can be used to control if an element is draggable. Firefox 没有可用于控制元素是否可拖动的 CSS 属性。

For more information see:有关更多信息，请参阅：

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

问题描述

1 个解决方案

解决方案1
5 已采纳 2016-08-12 02:22:19

Disable Dragging via Brute Force:通过蛮力禁用拖动：

How it is supposed to work:它应该如何工作：

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

问题描述

1 个解决方案

解决方案1 5 已采纳 2016-08-12 02:22:19

Disable Dragging via Brute Force:通过蛮力禁用拖动：

How it is supposed to work:它应该如何工作：

解决方案1
5 已采纳 2016-08-12 02:22:19