disable text drag and drop

Question

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.

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, Oct 19 '09 at 17:23
Well, the users asked me to implement such a thing :) Seriously, I`ve never seen anybody use this "feature", and I have messed up text I`ve been editing more than once thanks to it. About checking if it works - I`ll do it tomorrow at work. — maniek, Oct 19 '09 at 21:57
Possible duplicate of [Disable Drag and Drop on HTML elements?](https://stackoverflow.com/questions/704564/disable-drag-and-drop-on-html-elements) — palswim, Mar 20 '19 at 19:26

score 21 · Answer 1 · answered Oct 20 '09 at 09:45

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

onmousedown="return false;" also works on firefox/chrome afaik... might be wrong... Note that the "Devil" might not do the same thing. — Warty, Apr 13 '10 at 17:57

score 11 · Answer 2 · answered Dec 19 '12 at 14:31

11

This thing works.....Try it.

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

hope it helps. Thanks

answered Dec 19 '12 at 14:31

SyntaxError

3,717
6
30
31

Brady · Accepted Answer · 2010-04-13T17:55:36.150

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

score 3 · Answer 4 · answered Oct 19 '09 at 15:57

3

add the following to your field tags:

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

answered Oct 19 '09 at 15:57

Kopernik

2,783
1
20
21

There's also `onselectstart` which may be useful. – DisgruntledGoat Oct 19 '09 at 17:31
For firefox this is not enough (too much, actually), it totally disables mouse usage on a given input field. You can not even select it. Onselectstart is not good enough too. So, still no solution for firefox - for IE ondragstart does the right thing. – maniek Oct 20 '09 at 07:58
it doesnt work because of onmousedown="return false" which actually disables the mousedown event so no wonder u cant click – Jacek Pietal Aug 20 '13 at 13:15

score 0 · Answer 5 · edited Sep 26 '17 at 16:09

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/

score 0 · Answer 6 · answered Jul 27 '18 at 13:46

0

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

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

answered Jul 27 '18 at 13:46

Wokay

1

score 0 · Answer 7 · edited Feb 03 '12 at 14:43

0

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

edited Feb 03 '12 at 14:43

alain.janinm

19,951
10
65
112

answered Apr 08 '11 at 16:02

Joe Schrag

855
8
23

disable text drag and drop

7 Answers7

Linked

Related