Search code examples
javascripthtmlcssfirefox-addonfirefox-addon-webextensions

Disable drag for any object in firefox addon popup

I am developping an extension on Chrome / Firefox which has a popup composed of different graphic elements. 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:

* {
    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. Is there any css attribute which could work in this case?

Here is a minimal version: https://drive.google.com/open?id=0B4k6nM18722gNjY5VjVpREhpRTQ

Solution

  • 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:
    function noDrag(event) {
    event.preventDefault();
}
document.addEventListener('dragstart',noDrag,true);
    • Or add this line to popup.js:
    document.addEventListener('dragstart',function(event){event.preventDefault();},true);
    • Or change the <html> line in popup.html to:
    <html ondragstart='event.preventDefault();'>

    My personal preference is to use the named noDrag function. 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. If there was not already a JavaScript file associated with this popup, I would use the HTML ondragstart method.

    How it is supposed to work:

    The following does not disable dragging on <a> and <img> elements. 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.

    In Firefox (and the HTML specification), the element being draggable is controlled by the 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; on all such elements.

    Firefox does not have a CSS property which can be used to control if an element is draggable.

    For more information see: