disable text drag and drop

17
votes

There is a common feature of modern browsers where a user can select some text and drag it to an input field. Within the same field it causes moving of text, between different fields it does copying. How do I disable that? If there is no portable way, I am mostly interested in firefox. This is an intranet webapp, so I am also interested in modifying the browser/getting a plugin to do this. Maybe some system-level settings (I`m on windows XP)?

I need to keep the default select-copy-paste functionality.

The background is I have multiple-field data entry forms, and users often drag something by mistake.

7
htmldrag-and-drop
The answer posted should technically do what you want, but I'd question your motives - you may end up annoying more users than you help. It may sound a little naive, but if people can't figure out how to use their mouse properly that's their problem, not yours. - DisgruntledGoat
Well, the users asked me to implement such a thing :) Seriously, Ive never seen anybody use this "feature", and I have messed up text Ive been editing more than once thanks to it. About checking if it works - I`ll do it tomorrow at work. - maniek
Possible duplicate of Disable Drag and Drop on HTML elements? - palswim

7 Answers

21
votes

For archival purposes:

<body ondragstart="return false" draggable="false"
        ondragenter="event.dataTransfer.dropEffect='none'; event.stopPropagation(); event.preventDefault();"  
        ondragover="event.dataTransfer.dropEffect='none';event.stopPropagation(); event.preventDefault();"  
        ondrop="event.dataTransfer.dropEffect='none';event.stopPropagation(); event.preventDefault();"
>

does what I wanted. You can add the ondrag* handlers to form elements, too, like <input ondragenter=...>

reference url: https://developer.mozilla.org/En/DragDrop/Drag_Operations

11
votes

This thing works.....Try it.

<BODY ondragstart="return false;" ondrop="return false;">

hope it helps. Thanks

5
votes

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);
 }
}
3
votes

add the following to your field tags:

#ondragstart is for IE, onmousedown is for firefox
ondragstart="return false" onmousedown="return false"
0
votes

ondraggesture is supported by older versions of Firefox instead of ondragstart.

0
votes

Use the following code

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}

and:

<input type="text" ondrop="drop(event)" ondragover="allowDrop(event)">

See: http://jsfiddle.net/zLYGF/25/

0
votes

You can use :focus attribute to recognize over what your mouse is:

        if(document.activeElement.tagName == "INPUT"||document.activeElement.tagName == "TEXTAREA"){
            event.preventDefault()
            return
        }