Question

现代浏览器的一个共同特征是用户可以选择一些文本并将其拖动到输入字段。在同一个字段中，它会导致文本移动，在复制的不同字段之间移动。我如何禁用它？如果没有便携方式，我最感兴趣的是firefox。这是一个内部网webapp，所以我也有兴趣修改浏览器/获取插件来执行此操作。也许是一些系统级设置（我在Windows XP上）？

我需要保留默认的选择 - 复制 - 粘贴功能。

背景是我有多字段数据输入表单，用户经常会误拖东西。

Answer 1

出于档案目的：

<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();"
>

做我想要的。您也可以将ondrag *处理程序添加到表单元素中，例如＆lt; input ondragenter = ...＆gt;

参考网址：https://developer.mozilla.org/En/DragDrop/Drag_Operations

Answer 2

这件事有效.....试试吧。

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

希望它有所帮助。感谢

Answer 3

此代码适用于所有版本的Mozilla和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);
 }
}

Answer 4

将以下内容添加到字段标记中：

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

Answer 5

较旧版本的Firefox支持

ondraggesture，而不是ondragstart。

Answer 6

使用以下代码

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

和

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

请参阅：http://jsfiddle.net/zLYGF/25/

Answer 7

您可以使用：focus属性来识别鼠标是什么：

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

禁用文本拖放

7 个答案: