Disable Drag and Drop on HTML Elements

Disable Drag and Drop on HTML elements?

Try preventing default on mousedown event:

<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>

<div onmousedown="return false">asd</div>

JS Disable drag and drop (draggable attribute)

On the W3Schools page you referenced - past this into the console:

document.getElementById('drag1').setAttribute('draggable',false);

Then try to drag the element. I think you'll find it works ;)

If you provide your code, I will help you debug.

Disable drag & drop on HTML page?

You can't prevent users from copying your images, you can only make it less convenient. So its a matter of deciding how much effort you want to put into this prevention.

You will be able to prevent less sophisticated users via the methods you are using, but any image includes the href (file path on browser). A user could WGET the file, browse directly to the image, open up the Dev Tools, use an analog workaround (like the Windows screen snip tool), etc.

Disable drag and drop of selected text

document.getElementById("test").addEventListener("dragstart", function(e){  e.preventDefault();});

<input id="test" type="text" value="Drag text into textarea"><br><textarea></textarea>

Disable HTML5 Drag & Drop for Range Inputs

Listening to the dragstart event does nothing unless you actually enable the drag and drop features on the element where you want to handle the event. So I ended up adding the draggable="true" parameter to the input range. Then the dragstartevent gets triggered.

The handler should then simply prevent default and stop the event propagation.

  /**
   * Handler for the drag start event. This is needed to prevent the dragging of
   * list items in the case that this parameter is used in such.
   * Simply stop everything.
   * @param e
   * @returns {boolean}
   * @private
   */
  _dragStart: function(e) {
    e.preventDefault();
    e.stopPropagation();
  }

Disable dragging an image from an HTML page

I tried myself and found this is working.

$("img").mousedown(function(){
    return false;
});

I am sure this disables dragging of all the images. Not sure it effects something else.

Disable drag for any object in firefox addon popup

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:

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.)

disable text drag and drop

This code will work in all versions of Mozilla and IE.

function preventDrag(event)
{
 if(event.type=='dragenter' || event.type=='dragover' || //if drag over event -- allows for drop event to be captured, in case default for this is to not allow drag over target
    event.type=='drop') //prevent text dragging -- IE and new Mozilla (like Firefox 3.5+)
 {
  if(event.stopPropagation) //(Mozilla)
  {
   event.preventDefault();
   event.stopPropagation(); //prevent drag operation from bubbling up and causing text to be modified on old Mozilla (before Firefox 3.5, which doesn't have drop event -- this avoids having to capture old dragdrop event)
  }
  return false; //(IE)
 }
}

//attach event listeners after page has loaded
window.onload=function()
{
 var myTextInput = document.getElementById('textInput'); //target any DOM element here

 if(myTextInput.addEventListener) //(Mozilla)
 {
  myTextInput.addEventListener('dragenter', handleEvents, true); //precursor for drop event
  myTextInput.addEventListener('dragover', handleEvents, true); //precursor for drop event
  myTextInput.addEventListener('drop', preventDrag, true);
 }
 else if (myTextInput.attachEvent) //(IE)
 {
  myTextInput.attachEvent('ondragenter', preventDrag);
  myTextInput.attachEvent('ondragover', preventDrag);
  myTextInput.attachEvent('ondrop', preventDrag);
 }
}

Disable Drag and Drop on HTML Elements